进入内容
vue
vue操作简易
第一步:是从官网上下载然后导入
第二部:挂载 vue与页面的关系
挂载必须是匹配一次就能得到结果的语法
1.通常挂载电都采用的是id选择器,而且html和body标签是不能作为挂载点的
2.实例内部不需要使用一个变量,因为this可以代表当前vue本身,如果在外部或者其他的实例内部需要,就定义一个变量接受new vue()产生的实例
{{}}
{{}}里面可以放下很多的变量名
如果在挂载点给{{}}中的变量名赋值,可以在{{}}中进行运算以及取值,这边举个例子应该就能说清楚了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ num * 10 }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'msg',
num: 10
}
})
</script>
</html>
看上面p标签当中的内容是可以进行计算的
v-text
因为是text,所以不能解析html语法的文本,会被原模原样的输出
v-html
这个就可以解析文本中html语法的内容了.
v-once
从名字就能看出只能被解析一次
面向对象的js
这里就是对以前js的一些回忆,不过今天讲这个有一种反客为主的感觉,因为今天的js内容是真的有点多
然后就是因为是面向对象,所以肯定有类,那么类的定义就是
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的语法
console.log(this.name + '在' + food)
}
};
console.log(obj.name);#相当于python的print
然后是函数的补充
函数是可以简写的
比如function(food)可以简写成food=>
事件指令
v-on:事件=变量
v-on:可以简写变成 @事件='变量'
或者变量后面加括号传参数,
属性指令
v-bind:属性="变量",也可缩写,变成:属性="变量"