我是 box,,,yzx
我是inner1
我是inner2
内置指令
v-model指令:
v-model主要实现数据双向绑定 , 通常用在表单元素上 , 例如input、、等 。
v-text指令:
v-text是在DOM元素内部插入文本内容 , 页面结构代码如下:
>var vm = new Vue({el: '#app',data: {msg: '我是v-text'}})
v-html指令:
v-html(单向绑定)是在DOM元素内部插入HTML标签内容 , 页面结构代码如下:
>var vm = new Vue({el: '#app',data: {msg: '我是v-html yzx '}})
v-bind指令:
v-bind可以实现单向数据绑定 , 页面结构代码如下:
>var vm = new Vue({el: '#app',data: {msg: '我是v-bind yzx'}})
![Vue 实例之数据绑定,事件,组件,生命周期!!!](http://img.gansulong.com/230622/103252HK-0.jpg)
文章插图
v-on指令:
v-on是事件监听指令 , 直接与事件类型配合使用 , 页面结构代码如下:
{{msg}}
> var vm = new Vue({el: '#app',data: {msg: '请单击按钮查看内容'},methods: {showInfo () { this.msg = '我是v-on指令'}}})
【重要】v-for指令:
v-for可以实现页面列表渲染 , 常用来循环数组 , 页面结构代码如下 。
注意:核心技能 , 通过遍历循环读取数组或序列 , 来依次展示对应的内容 。索引是从 0开始的 , 数组可以存不同类型的数据,一般不建议存不同数据类型~
索引是:{{key}} , 元素内容是:{{value}}>var vm = new Vue({el: '#app',data: {list: [1, 2, 3,'y','z','x']}})
v-if和v-show指令:
v-if用来控制元素显示或隐藏 , 属性为布尔值 , 页面结构代码如下:
我是v-if yzx>var vm = new Vue({ el: '#app',data: { isShow: true}})
3.VUE数据绑定测验
写一个添加的功能 , 添加可以是固定的写法,删除默认删除最后一个的学生的记录 , 代码如下:
【Vue 实例之数据绑定,事件,组件,生命周期!!!】