Vue基本用法、Vue模板语法
Vue概述
vue：渐进式JavaScript框架
渐进式：声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建
vue官网
优点：（官方）
- 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手vue
- 灵活：在一个库和一套完整框架之间自如伸缩
- 高效：20kB运行大小，超快虚拟DOM
Vue基本使用
实例参数分析
- el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
- data：模型数据（值是一个对象）
- methods: 能定义很多我们需要的方法
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1:'html
'
},
methods:{
handle:function(){
//this是vue的实例对象
this.num++;
}
}
});
插值表达式用法
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作
<div>{
{msg}}div>
Vue代码运行原理分析
- 概述编译过程的概念（Vue语法 —（Vue框架）—>原生语法）
Vue模板语法
模板语法概述
1、如何理解前端渲染？
把数据填充到HTML标签中 --> 静态HTML内容
2、前端渲染方式
-
原生JS拼接字符串：
将数据以字符串的方式拼接到HTML标签中
缺点： 不同开发人员代码风格差别很大，随着业务复杂，后期维护变得逐渐困难。
-
使用前端模板引擎：
一套模板语法规则
优点：代码可读性提高，方便后期的维护。
缺点：没有专门提供事件机制。 -
使用vue特有的模板语法
指令
什么是指令
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如：v-cloak）
v-cloak指令用法
- 用来解决插值表达式存在的问题：“闪动”
- 解决原理：先隐藏,替换好值之后再显示最终值
1.提供样式
[v-cloak]{
display:none;
}
2.在插值表达式所在的标签中添加v-cloak指令
v-text指令
- 填充纯文本
- 相比插值表达式更简洁
<div v-text='msg1'>div>
v-html指令
- 填充HTMI片段
- 存在安全问题，容易导致XSS攻击
- 本网站内部数据可以使用，来自第三方的数据不可以用
<div v-html='msg1'>div>
v-pre指令
- 填充原始信息
- 显示原始信息，跳过编译过程
<div v-pre>{
{msg}}div>
数据响应式
如何理解响应式:
- html5中的响应式：屏幕尺寸的变化导致样式的变化
- 数据的响应式：数据的变化导致页面内容的变化
什么是数据绑定
- 将数据填充到标签中
v-once指令只编译一次
- 显示内容之后不再具有响应式功能
- 应用场景：显示的信息后续不需要再修改，使用v-once可以提高性能（不需要实时监听）
<div v-once>{
{msg}}div>
双向数据绑定
什么是双向数据绑定？
- 页面（输入框）修改内容–>数据会跟着变
- 数据改变–>插值表达式内容跟着变
用v-model指令实现数据绑定
<input type="text" v-model='msg'>
MVVM设计思想
M <=VM=> V
- M(model)
- V(view)
- VM(View-Model)
事件绑定
vue如何处理事件？
- v-on指令用法：
<button v-on:click='num++'>点击button>
- v-on简写形式：
<button @click='num++'>点击button>
事件函数调用方式
- 直接绑定函数名
<button @click='handle'>点击button>
- 调用函数
<button @click='handle()'>点击button>
事件函数参数传递
<button @click='say("hi",$event)'>点击button>
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
事件修饰符
- .stop 阻止冒泡
<button v-on:click.stop='handle()'>点击button>
- .prevent阻止默认行为(比如：a标签页面跳转)
<a href="http://www.baidu.com" v-on:click.prevent='handle()'>百度a>
按键修饰符
- .enter回车键
<input type="text" v-on:keyup.enter='handle'>
- 提供了：enter\tab\delete\esc\space\up\down\left\right
自定义按键修饰符
- 全局config.keyCodes对象
<input type="text" v-on:keyup.a='handle'>
<script>
Vue.config.keyCodes.a = 65;
script>
- 也可以直接绑定按键的keyCode
<input type="text" v-on:keyup.按键的keyCode='handle'>
属性绑定
Vue如何动态处理属性？
- v-bind指令用法
<a v-bind:href="url">跳转a>
- 缩写形式
<a :href="url">跳转a>
v-model的底层实现原理分析
<input type="text" v-bind:value='msg' v-on:input='msg = $event.target.value'>
样式绑定
class样式处理
- 对象语法
<div v-bind:class="{active:isActive}">div>
<div v-bind:class="{active:isActive,avtive2:isActive2}">div>
- 数组语法
<div v-bind:class="[activeClass,errorClass]">div>
样式绑定相关语法细节：
- 对象绑定和数组绑定可以结合使用
<div v-bind:class="[activeClass,errorClass,{test:isTest}]">hellodiv>
- class绑定的值可以简化操作
<div v-bind:class="[arrClass]">hellodiv>
- 默认的class如何处理：默认的class会保留
style样式处理
- 对象语法
<div v-bind:style="{
color:activeColor,fontSize:fontSize}
">hellodiv>
<div v-bind:style="objStyles">hellodiv>
- 数组语法
<div v-bind:style="[objStyles,baseStyles]">hellodiv>
分支循环结构
分支结构
- v-if
- v-else
- v-else-if
<div v-if='score>90'>优秀div>
<div v-else-if='score<90&&score>=80'>良好div>
<div v-else-if='score<80&&score>=60'>一般div>
<div v-else>比较差div>
- v-show
<div v-show='false'>测试v-showdiv>
v-if和v-show的区别
- v-if控制原始是否渲染到页面
- v-show控制元素是否显示（已经渲染到页面）
循环结构
- v-for遍历数组
<li v-for='item in fruits'>{
{item}}li>
<li v-for='(item,index) in fruits'>{
{item+'----'+index}}li>
<li v-for='item in myFruits'>{
{item.ename+'---'+item.cname}}li>
- key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='item in myFruits'>{
{item.ename+'---'+item.cname}}li>
- for遍历对象
<div v-for='(v,k,i) in obj'>{
{v+'---'+k+'---'+i}}div>
- v-if和v-for结合使用
<div v-if='v==12' v-for='(v,k,i) in obj'>{
{v+'---'+k+'---'+i}}div>