-
v-model 双向绑定data里面的inputValue的值
v-for 绑定data 里面的list值
定义提交方法
this.list.push(this.inputValue) 提交输入的值到list
this.inputValue = '' 情况输入的值
查看全部 -
v-for 表示把数据循环展示
v-for="itemxx of list" 表示取data 里面list的值,for循环每一项赋值给itemxx,循环展示的时候取值既可以用{{itemxx}}。
使用 :key="itemxx" 可以提升v-for的性能,
但注意key值要求每一项的值都不同。
可以v-for="(itemxx, ixx) of list" :key="ixx" 这样写表示使用第几项作为key值,这样保证key值的不同。
查看全部 -
v-if 表示直接添加或去掉标签,即true添加显示标签,false移除销毁标签。
@click 表示绑定methods里面的方法
v-show 表示标签的style 样式添加 display:none 属性,并没有直接去掉标签
查看全部 -
watch 监听器,表示监听某属性数据发生变化时触发
或者监听计算属性的变化,如全名 fullName
查看全部 -
computed 计算属性,表示通过别的属性计算出来的。
当被计算的属性没有改变时,则会使用computed的缓存值。
查看全部 -
v-model 实现数据双向绑定,绑定数据,数据变了则其它标签的数据也会跟着变。
查看全部 -
v-bind 标签:表示属性绑定。
使用v-xxx标签等号后面接的内容不再是字符串,而是JS表达式。
v-bind="title" title表示的是data里面的title内容。
v-bind="'Add xxx ' + title" 表示的结果是:Add xxx 加上data里面title的内容。
v-bind:title 可以缩写成 :title
查看全部 -
在vue里面改变data数据定义的内容。
当data数据内容改变时,vue会自动刷新绑定的标签,不需要操作document标签。
面向数据去编程。
示例:this.content = "world" 则直接改变了data里面定义的content的值。
查看全部 -
vue语法:
v-on:click 表示添加点击事件。
v-on:click="handleClick" 表示添加点击事件绑定handleClick方法
在vue的methods:{} 对象里面添加对应的方法即可调用
v-on:click 可以简写成 @click
查看全部 -
vue语法:
插值表达式-方法一:{{numxxx}}
插值表达式-方法2:使用 v-text="numxxx"
插值表达式-方法3:使用 v-html="numxxx"
v-text 与 v-html 的区别:
v-text不会转义。
v-html会转义内容。
查看全部 -
vue的hello world示例:
引入vue.js源码:在html标签头部使用<script src="./vue.js"></script>引入
使用vue则不需要再document.getElementById("root")这样操作标签。
直接使用{}挂载点方式绑定。
查看全部 -
this.$emit('delete',this.index)
查看全部 -
v-if="show"
v-if dom中删除
v-show 隐藏
v-for 循环展示
v-for="item of list”
查看全部 -
计算属性:
computed:
侦听器:
watch:
查看全部 -
插值表达式
v-text 不会转义
v-html 会转义
v-on:click click标签
v-on:简写为@
methods
查看全部
举报