Vue基础——Vue模板语法

学习目标：
1、能够说出Vue基本用法；
2、能够说出Vue的模板语法；
3、能够说出Vue的常用特性；
4、能够基于Vue实现案例效果。目录：
1、Vue概述
2、Vue基本使用
3、Vue模板语法
4、基础案例
5、Vue常用特性
6、综合案例

1、Vue概述
国产框架，作者尤雨溪。渐进式JavaScript框架。
渐进式：
　　声明式渲染——>组件系统——>客户端路由——>集中式状态管理——>项目构建
优点：
　　1、易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue;
　　2、灵活：在一个库和一套完整框架之间自如伸缩；
　　3、高效：20KB运行大小，超快虚拟DOM。 2、Vue基本使用(实现HelloWord案例)
传统开发模式对比：
1、原生Js

<div id="msg"></div>
<script type="text/javascript">
var msg = "Hello World";
var div = document.getElementById("msg");
div.innerHTML = msg;
</script>

2、Jquery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = "Hello World";
$("#msg").html(msg);
</script>

3、Vue.js

<div id="app">
<div>{{msg}}</div>
<div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"Hello World"
}
})
</script>

实例参数分析：
　　el:元素的挂载位置(值可以是CSS选择器或者DOM元素)；
　　data:模型数据(值是一个对象)。
插值表达式用法(插值表达式即代码中的{{}}):
　　将数据填充到HTML标签中；
　　插值表达式支持基本的计算操作。
　　例如：<div>{{1 + 3}}</div>//页面会显示4
Vue代码运行原理分析：
　　Vue代码——>Vue框架——>原生js代码3、Vue模板语法3.1、模板语法概述：
如何理解前端渲染：
　　把数据填充到HTML标签中；
　　模板+数据——>前端渲染=静态的HTML内容
前端渲染方式：
　　1、原生js拼接字符串：
　　　　基本就是将数据以字符串的方式拼接到HTML标签中。缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
　　2、使用前端模板引擎：
　　　　它拥有自己的一套模板语法规则，与拼接字符串相比，代码明显规范了很多。优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期额维护。缺点：没有专门提供事件机制。
　　3、使用Vue特有的模板语法：
　　　　插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。3.2、指令：

什么是指令？
　　什么是自定义属性
　　指令的本质就是自定义属性
　　指令的格式：以v-开始(如：v-cloak)
v-cloak指令用法：
　　插值表达式存在的问题：“闪动”
　　如何解决该问题：使用v-cloak指令
　　解决该问题的原理：先隐藏，替换好值之后再显示最终的值
　　详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-cloak

3.3、数据绑定指令：
v-text 填充纯文本
　　相比插值表达式更加简洁
　　详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-text
v-html 填充HTML片段
　　存在安全问题
　　本网站内部数据可以使用，来自第三方的数据不可以使用
　　详细使用方法参见api:https://cn.vuejs.org/v2/api/#v-html
v-pre 填充原始信息
　　显示原始信息，跳过编译过程
　　详细使用参见api:https://cn.vuejs.org/v2/api/#v-pre3.4、数据响应式：
如何理解响应式：
　　html5中的相应式(屏幕尺寸的变化导致样式的变化)
　　数据响应式(数据的变化导致页面内容的变化)
什么是数据绑定：
　　数据绑定：将数据填充到标签中
v-once 只编译一次
　　显示内容之后不再具有响应式功能3.5、双向数据绑定：
什么是双向数据绑定：
　　简单来说就是改变表单输入域中的内容会导致数据的变化，数据的变化又会导致页面显示内容的变化。
双向数据绑定分析：
　　v-model指令用法：
　　　　<input type="text" v-model="username"/>
　　　　详细用法参见api:https://cn.vuejs.org/v2/api/#v-model3.6、MVVM设计思想：
M(model)
V(view)
VM(View-Model)3.7、事件绑定：
Vue如何处理事件：
　　v-on指令用法：

<input type="buttom" v-on:click="num++"/>

　　v-on简写形式：

<input type="buttom" @click="num++"/>

事件函数的调用方式：
　　直接绑定函数名：

<buttom v-on:click="say">Hello</buttom>

　　调用函数：

<buttom v-on:click="say()">say Hello</buttom>

事件函数参数传递：
　　普通参数和事件对象

<buttom v-on:click="say('hi',$event)">say hi</buttom>

　　事件绑定-参数传递注意点：
　　　　1、如果事件直接绑定函数名，那么默认传递事件对象作为事件函数的第一个参数；
　　　　2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event。
事件修饰符：
　　.stop阻止冒泡

<a v-on:click.stop="handle">跳转</a>

　　.prevent阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

　　更多事件修饰符参见api：https://cn.vuejs.org/v2/api/#v-on
按键修饰符：
　　.enter回车键

<input v-on:keyup.enter="submit">

　　.delete删除键

<input v-on:keyup.delete="handle">

　　更多的按键修饰符参见api:https://cn.vuejs.org/v2/guide/events.html#按键修饰符

自定义按键修饰符：
　　全局config.keyCodes对象
　　　　Vue.config.keyCodes.f1 = 112
　　详细使用方法参见api:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

3.8、属性绑定：

Vue如何动态处理属性？
　　v-bind指令用法
　　　　<a v-bind:href="url">跳转</a>
　　缩写形式
　　　　<a :href="url">跳转</a>
v-model的底层实时原理分析
　　<input v-bind:value="msg" v-on:input="msg=$event.target.value">
　　通过属性绑定和事件绑定来实现v-model

3.9、样式绑定：
class样式处理
　　对象语法
　　　　<div v-bind:class="{active:isActive}"></div>
　　数组语法
　　　　<div v-bind:class="{activeClass,errorClass}"></div>
style样式处理
　　对象语法
　　　　<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>
　　数组语法
　　　　<div v-bind:style="[baseStyles,overrideStyles]"></div>

3.10、分支循环结构：
分支结构
　　v-if
　　v-else
　　v-else-if
　　v-show
v-if与v-show的区别
　　v-if控制元素是否渲染到页面
　　v-show控制元素是否显示(已经渲染到了页面)
循环结构
　　v-for遍历数组
　　　　<li v-for="item in list">{{item}}</li>
　　　　<li v-for="(item,index) in list">{{item}}+"---"+{{index}}</li>
　　key的作用：帮助Vue区分不同的元素，从而提高性能
　　　　<li :key="item.id" v-for="(item,index) in list">{{item}}+"---"+{{index}}</li>