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
指令在表单
、
及select
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
Title - 锐客网
输入的文本:{{message}}
v-model="selected">
>
选中的值:{{selected}}
src="http://img.readke.com/220415/1KKL2H-0.jpg">>
var vm = new Vue({
el: "#app",data: {
message: '123',
selected: ''
}
});
【狂神Vue学习|狂神Vue学习02(Vue基本语法、双向绑定)】注意:如果
v-model
表达式的初始值未能匹配任何选项,< select >元素将被渲染为“未选中”状态。在IOS中,这会使用户无法选择第一个选项。因为这样的情况下,iOS不会触发change事件。因此,更推荐像上面这样提供一个值为空的禁用选项。推荐阅读
- IntelliJ|Vue学习笔记(狂神)
- 技术笔记|Vue 异步通信、计算属性、slot插槽和自定义事件
- 狂神Vue学习|狂神Vue学习03(Vue组件、网络通信、Vue的生命周期、计算属性)
- Vue(狂神说系列)|【Vue】—6(网络通信(Vue:Axios异步通信)(狂神系列))
- vue|第94天学习打卡(Vue 事件 表单双绑、组件、网络通信 Axios 计算属性内容分发)
- vue|uniapp+java小程序支付
- vue 数字滚动效果 vue-count-to
- APP开发从0到1|webview[detail] does not exist【BUG解决】【MUI+VUE】
- vue|基于Vue+elementUI+django前后端分离员工管理系统