技术笔记|Vue 基础语法

2022-03-01 vue.js 技术笔记

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: '男' }, ] } })

姓名	年龄	性别
{{item.user}}	{{item.age}}	{{item.gender}}

v-for 还支持一个可选的参数，即当前项的索引 index。

序号姓名年龄性别 {{index}} {{item.user}} {{item.age}} {{item.gender}}

序号	姓名	年龄	性别
{{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 中。

5.双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在表单中使用双向数据绑定，可以使用 v-model 指令在表单、

</code> 以及 <code></code> 元素上创建双向数据绑定，它负责监听用户的输入事件以更新数据。<br />
 
<blockquote> <code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code> 选项中声明初始值。<br />
 
</blockquote> <code>v-model</code> 在内部为不同的输入元素使用不同的属性并抛出不同的事件：<br />
 
<ul> 
<li>text 和 textarea 元素使用 <code>value</code> 属性和 <code>input</code> 事件；</li> 
<li>checkbox 和 radio 使用 <code>checked</code> 属性和 <code>change</code> 事件；</li> 
<li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li> 
</ul> 文本输入框：<br />
 
<blockquote><code><div id="app">
输入框的内容：<input type="text" v-model="message"><br><br>
>Message is {{message}}</span>
</div>src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
>
var vm = new Vue({
el:"#app",
data:{
message: '',
}
})
</script>
</code></blockquote><br />
 <img alt="技术笔记|Vue 基础语法"
onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info8/2a1ec61fa5ec4e15a6bddfb75ef83f8a.jpg"/> <br />
文章图片 <br />
<br />
 多行文本：<br />
 
<blockquote><code><div id="app">
输入的信息：<br><br>
<textarea v-model="info" placeholder="add multiple lines">


>Multiline Message is {{info}}

src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
>
var vm = new Vue({
el:"#app",
data:{
info: '',
}
})

文章图片

注意：在文本区域插值 ({{text}}) 并不会生效，应用 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 能够识别。

src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> >//定义个 Vue 组件 Component Vue.component("topbar",{ props: ['data'], template: '{{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 项的值。