Vue 基础语法
-
-
- 1.v-bind
- 2.条件渲染
- 3.列表渲染
- 4.绑定事件
- 5.双向数据绑定
- 6.组件的使用
-
【狂神说Java】Vue最新快速上手教程通俗易懂 笔记：Vue 基本语法、Vue 绑定事件、Vue 双向绑定、Vue 组件讲解。
1.v-bind
v-bind 主要用于属性绑定。示例如下：
v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
message:"页面加载于" + new Date().toLocaleString()
}
})
文章图片
这里看到的 v-bind 被称为指令，指令带有前缀 v-，以表示他们是 Vue 提供的特殊特性，可能你已经猜到了，它们会在渲染 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 属性和 Vue 实例的 message 保持一致。”
2.条件渲染
v-if 指令用于条件性地渲染一块内容。
我非常高兴!
哦不，我现在很心烦.
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
happy: true,
}
})
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
优秀
良好
一般
及格
不及格
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
score: 75,
}
})
3.列表渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是原数据数组，而 item 则是被迭代的数组元素的别名。
列表渲染 - 锐客网
姓名
年龄
性别
{{item.user}}
{{item.age}}
{{item.gender}}
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
items: [
{
user:'张三',
age: 18,
gender: '男'
},
{
user:'李四',
age: 24,
gender: '女'
},
{
user:'王五',
age: 25,
gender: '男'
},
]
}
})
v-for 还支持一个可选的参数，即当前项的索引 index。
序号
姓名
年龄
性别
{{index}}
{{item.user}}
{{item.age}}
{{item.gender}}
文章图片
4.绑定事件
可以用
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例如下：给按钮绑定一个点击事件，点击按钮弹出提示语。
事件绑定 - 锐客网
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
message:'Hello Boy!',
},
//方法必须定义在Vue的Methods对象中
methods: {
sayHello: function (event) {
alert(this.message);
}
}
})
【技术笔记|Vue 基础语法】
文章图片
-
el属性：用来指示 vue 编译器从什么地方开始解析 vue 的语法。
-
data属性：用来组织从 view 中抽象出来的属性，可以说将视图的数据抽象出来存放在 data 中。
-
methods属性：放置页面中的业务逻辑，js 方法一般都要放置在 methods 中。
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在表单中使用双向数据绑定，可以使用
v-model 指令在表单
>Multiline Message is {{info}}
文章图片
注意：在文本区域插值 (
v-model 来代替。复选框：
选中的项：{{checkedNames}}
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
checkedNames: [],
}
})
文章图片
单选框：
性别：
您选择的是：{{checked}}
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
checked: '男', //给个默认值
}
})
文章图片
下拉框：
所属地区：
v-model="selected">
>您选择的是：{{ selected }}
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
selected: '', //给个默认值
}
})
如果是多选则绑定到一个数组，如果是单选就绑定一个空字符串。
文章图片
6.组件的使用
组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的
th:fraggment 等框架有异曲同工之妙。通常一个应用会以一棵树嵌套的组件树的形式来组织：
文章图片
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
{{data}} '
});
var vm = new Vue({
el:"#app",
data:{
items: ["Java", "Linux", "前端", "Python"]
}
})
文章图片
说明：
v-for="item in items"：变量 Vue 实例中定义的名为items的数组，并创建同等数量的组件；v-bind:data="https://www.it610.com/article/item"：将遍历的item项绑定到组件中props定义的名为data属性上；= 号左边的 data 为 props 定义的属性名，右边的为item in items中遍历的 item 项的值。
推荐阅读
- js|Vue全家桶-组件化开发
- Vue.js|VUE全家桶系列之基本知识点
- Vuejs|Vue全家桶之组件基础（二）
- Vuejs|Vue全家桶之Vue核心（一）
- Vuejs|Vue全家桶之Vue CLI入门（三）
- vue|Vue + Element UI 实现权限管理系统（页面权限控制（菜单 + 按钮））
- Vue 状态管理与与SSR详解
- 最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
- vue原理初探