模板语法
- 文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式
// 变量 {{ message }}
// 表达式 {{ number + 1}}
- JS表达式(计算、拼接、只能是单个表达式)
- 插入HTML代码(慎用!防止XSS攻击 ),我们可以直接在data里面定义html代码,但是它存在一个安全隐患,比如我们将下面的 dangerHTMl: "0085" 这句代码改变一下 dangerHTML: "0085" ,这时候的当我们点击时它执行了它里面的一个代码会弹出一个框,这是很危险的。像很多个XSS攻击就是用的这种方法,所以对于v-html我们还是要慎用。
0085"}
- 绑定,把data里面的数据绑定到元素的属性上,最常见的就是id
当data里面的数据改变时,它的Id也会随之改变。
changeId
methods: { changeId: function() { this.id = 'newId'; }}
除了Id的绑定之外,还有其他的一些绑定:
- v-bind:disabled => :disabled,一个元素的属性
- 常用于表单,比如一些输入框,按钮,如下:这个时候的按钮就是一个不可点击的状态了。
changeId
- v-bind:href 简写 :href,链接
- v-on:click 简写 @click,点击
计算属性(缓存机制)
data: { json: { key1: 1, key2: 2 } }, methods: { ... computed: { getJsonkey1: function() { return this.json.key1; } }, // 计算属性的缓存需要借助watch函数的监听 watch: { json: { handler: function(newVal,preVal){ console.log(JSON.stringify(preVal)); console.log(JSON.stringify(newVal)); }, deep: true, } } }
在vue里面监听json需要深度监听,因为它们是在同一个内存空间里面,地址是一样的。
这个时候打印出来的,我们会发现它们的新值和旧值都是一样的,这是由于它们是同一个内存地址我们访问时值已经改变。如果我们要改变两次的值不一样,那么我们需要用到计算属性里面的缓存。
比如先不监听json,而是监听getJsonkey1的方法,将watch的json变成getJsonkey1,这样的话我们就可以得到前后的两个值。
条件渲染
- v-if,判断元素是否要渲染,会复用元素(不想复用需要添加key)
- v-else-if
- v-else
- if else if else
testVIf: 'A',ABchangeInputValuedata: { ... inputValue: 10805,}methods: { ... // 当我们点击按钮时,触发changeInputValue,实现累加 changeInputValue: function() { this.inputValue++; }}watch: { ... inputValue: function() { console.log(this.inputValue); }}
复选框:
data: { // 默认选中 checkboxValue: true}