指令

vue指令只是dom上的行间属性,vue给这类属性赋予一定的意义 来实现特殊的功能 所有指令都以v-开头

v-model=”msg” 双向数据绑定

{{msg}}

v-text  防止{{}}

v-once 只绑定一次

{{msg}} {{msg}}

v-html 字符渲染成标签

p:'hello'

v-for

{{value}} {{item}}{{index}}let vm = new Vue({el:'#app',data:{obj:{name:'zfpx',age:9,address:'xxx'},}})

v-on  @点击事件

点击let vm = new Vue({
            el:'#app',
            data:{
            msg:"点击事件"
            },
            methods:{
            fn(val){
            alert(this.msg)  //// methods和data中的数据会全部放到vm上，而且名字不能冲突，冲突会报错，methods中的this指向的都是实例
            }
            }
    })

简单的实现了留言板

 /*
* 思路 ：
* 1.首先应该有一个input框 那么首先想到的就是 双向数据绑定
* 2.按回车需要在下面区域显示 按回车的时候需要添加一个事件  在下面区域显示需要找个东西存下
* 3.新建一个数组 存上输入框的内容 那么下一步就是需要显示在dom结构上 就需要绑定ul  li 上
*
* 1.定义 双向数据绑定的属性 要不然就会报错
* 2.定义一个空数组
* 3. 在存放事件方法里面 执行心相应的方法
* 4. 需要删除一项 给这一项添加一个点击事件 传递一个当前的索引 函数接受  通过filter这个过滤到当前项
* 5. 如果输入框为空 不能再添加到页面上去 直接给用户一个提示 然后直接return即可
*
* */
{{item}}删除{{index}}
{
return i!==index
})
}
}
})" _ue_custom_node_="true">

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【三】-vue指令及简易vue案例