vue基础
1.1 八字胡mustache语法
支持多种语法引用，只有在标签的内容中才可以使用
1.2 常用指令操作
1.2.1 v-once
v-once的作用是用来固定数据。一出现就不能再更改.在浏览器重新给vm.msg赋值也不会更改 h2 标签中显示的数据了
<h2 v-once> {{msg}} </h2> 1.2.2 v-html
v-html的作用是在渲染的时候识别html标签.会把span也解析出来 区别于v-text
v-text会把解析成字符串
<h2 v-once> {{msg}} </h2>
msg：'<span>啊哈哈</span>' 1.2.3 v-cloak（了解）
v-clock取消渲染时候的闪动。防止先出现{{msg}}然后替换成渲染后的内容
v-clock在页面显示的时候会自动删除
<h2 v-once> {{msg}} </h2>1.2.4 v-bind
v-bind动态绑定属性，表示 a标签中的 href 属性被绑定。属性中的值为变量。这个变量会在vue的实例中去找值
<a v-bind:href="url">百度</a> 可用来动态改变地址 <a v-bind:class="active">百度</a> 可用来动态改变样式
也可以缩写 省略v-bind
<a :href="url">百度</a> <a :class="active">百度</a>
完整代码演示，在按钮被点击的时候，这个url会自动替换。
<body>
<div id="app">
<a :href="url">百度</a>
<button @click='haha'>切换</button>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
url:'htttp://www.baidu.com'
},
methods:{
haha:function(){
this.url = 'http://itcast.cn';
}
},
})
动态绑定class对象语法
此时在class中只有key1这一个类名生效。另一个类名不存在
<body>
<div v-bind:class="{key1:isKey1,key2:isKey2}"></div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
isKey1:true,
isKey2:false,
},
})
</script>动态绑定style对象语法
<div v-bind:style="{color：red}"></div>1.3计算属性computed
当我们的属性需要某种变化的时候，我们可以重新定义一个属性。
我们在命名的时候一般用属性的名字比如 fullName而不是用动词getName
computed用两方法：set和get 通常我们会省略set 留下的实际上是get。所以在调用的世宏不用再加括号。直接用名字调用。
computed:{
reverseString:function(){
return this.msg.split('').reverse().join('');
}
} computed与methods对比
如果多次使用 computed只调用一次 而methods会调用4次
所以computed的性能更好一些。但是如果数据有变化的话computed也会重新调用。因为computed有内部缓存，推荐使用
1.4 es6 补充
1.4.1 let
es5之前的var没有块级作用域，但是function有自己的作用域。
但是es5有闭包，哈哈
es6的let有块级作用域
1.4.2 const
const表示不可变的，用来定义不需要改变的值。（尽量多用）
- 一旦被赋值，就不能修改
- 在定义的时候， 必须直接赋值
- 如果定义的是对象。可以改变对象中的属性。但不能重新赋值一个对象。那么保存的应该是对象的地址。
1.4.3 对象字面量增强写法
属性简写
let obj = {
name，gae
}方法简写
let obj = {
test（）{
console.log('哈哈');
}
}
京公网安备 11010502036488号