什么是vue?
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
下面是一个基础的例子
- 导入开发版本的Vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<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 数据
vue安装方法
直接用
直接下载并用
学习时可以这样使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
命令行工具 (CLI)
不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
vue指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性
创建标签
<div id="app">
<p>{{message}}aaaaa</p>
<p v-html="message">aaaa</p
><p v-text="message">aaaaa</p>
</div>
{{message}}
插入一个值,不影响标签中的其他内容
不能解析内容中的html标签
v-text = “message”
作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message">你好vue</p>
<p>{{message}}你好vue</p>
v-html = “message”
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message">你好vue</p>
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
methods:{
test(a,b){
alert(a);
}
}
v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
v-show
作用是根据真假切换元素的显示状态
原理是修改元素的 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
}
v-if
作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
频繁的切换使用v-show，反之则使用 v-if，前者的切换消耗小
v-bind
作用是为元素绑定属性
完整写法是 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
作用是根据数据生成列表结构
数组经常和 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}
]}
