Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
下面是一个基础的例子
<div id="app">
{{ message }}
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
结果为
Hello Vue!
{{ 变量 }} ,插值表达式获取 data 数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用 ID 选择器
可以使用其他的闭合标签,不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
直接下载并用
学习时可以这样使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js">script>
不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。
指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性
<div id="app">
<p>{{message}}aaaaap>
<p v-html="message">aaaap
><p v-text="message">aaaaap>
div>
插入一个值,不影响标签中的其他内容
不能解析内容中的html标签
作用是设置标签的文本内容
默认写法会替换全部内容,使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message">你好vue</p>
<p>{{message}}你好vue</p>
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message">你好vue</p>
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
methods:{
test(a,b){
alert(a);
}
}
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
作用是根据真假切换元素的显示状态
原理是修改元素的 display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为 true 元素显示,值为 false 元素隐藏
数据改变之后,对应元素的显示状态会同步更新
<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />
data:{
isShow:true, age:20
}
作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true,元素存在于 dom 中,为 false,从 dom 中移除
频繁的切换使用v-show,反之则使用 v-if,前者的切换消耗小
作用是为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略 v-bind,只保留:属性名
<img v-bind:src="imgSrc" />
<img :src="imgSrc" /> //简写
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/3.jpg' imgTitle:"这是一张图片"
}
可以传给 v-bind:class 一个对象,以动态地切换 class
<div v-bind:class="{ active: isActive }"></div>
data:{
isActive :true
}
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是(item,index)in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一
<li v-for="item in array">
{{item}}省
</li>
<li v-for="(item,index) in array">
{{index+1}}{{item}}省
</li>
<li v-for="(item,index) in objects">
{{index+1}}{{item.name}}{{item.age}}
</li>
data:{
array:['陕西','山西','河南'], objects:[
{name:'admin',age:23}, {name:'jim',age:22}
]}