狂神Vue学习|狂神Vue学习02(Vue基本语法、双向绑定)

Vue基本语法 我们已经成功创建了第一个Vue应用。看起来这跟渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象的属性,界面可以实时更新
v-bind

Title - 锐客网
v-bind:title="message"> 鼠标悬停几秒查看动态绑定的提示信息
src="http://img.readke.com/220415/1KKL2H-0.jpg">> var vm = new Vue({ el: "#app",data:{ message: "hello,vue!" } });

我们看到的v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性,它们会在渲染的DOM上应用特殊的响应式行为。
在这里,该指令的意思是:将这个元素节点的title特性和Vue实例的message属性保持一致
如果再次打开浏览器的JavaScript控制台,输入app.message=‘新消息’,就会再次看到这个绑定title特性的HTML已经进行了更新
判断、遍历 v-if v-elseif v-else
Title - 锐客网
A B C
src="http://img.readke.com/220415/1KKL2H-0.jpg">> var vm = new Vue({ el: "#app",data:{ type: 'A' } });

v-for
Title - 锐客网
  • {{item.message}} {{index}}
  • src="http://img.readke.com/220415/1KKL2H-0.jpg">> var vm = new Vue({ el: "#app",data:{ items: [ {message: 'java'}, {message: 'php'}, {message: '运维'} ] } });

    事件 v-on
    Title - 锐客网
    src="http://img.readke.com/220415/1KKL2H-0.jpg">> var vm = new Vue({ el: "#app",data: { message: 'java' }, methods: { //方法必须定义在Vue的Method对象中 sayHi: function (){ //this指向当前对象 alert(this.message); } } });

    Vue双向绑定 什么是双向绑定 Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化时,视图也就是发生变化,当视图发生变化时,数据也跟着同步变化。这也算是Vue.js的精髓之处。
    值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
    为什么要实现数据的双向绑定 在vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定的,这是用的UI控件来说,对于我们处理表单,Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作
    在表单中使用双向数据绑定 可以用v-model指令在表单