我是 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'}})
文章插图
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 实例之数据绑定，事件，组件，生命周期！！！】