Vue基础
Vue: 渐进式JavaScript框架
渐进式：声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建
-
易用 ：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
-
灵活：在一个库和一个完整框架之间自如伸缩
-
高效：20kb运行大小，超快虚拟DOM
2. 基本使用
2. 1 传统开发吗模式对比
原生JS ：
<div id="msg"></div> <script> var msg = 'Hello Word'; var div = document.getElementById('msg'); div.innerHtml = msg; </script>
jQuery：
<div id="msg"></div> <script type="text/javascript" src = "js/jQuery.js"></script> <script> var msg = 'Hello Word'; $('#msg').html(msg); div.innerHtml = msg;
</script>
Vue：
<div id="app"> <div>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ msg:'Hellow Word!' } }) </script>
2.2 Vue的基本使用
1.Vue的基本使用步骤：
需要提供标签用于填充数据
引入vue.js 库文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面
2.Vue实例参数分析：
el ：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）
3. 插值表达式用法：
将数据填充到
HTMl中插值表达式支持基本的计算操作
4. Vue代码运行原理分析：
-
概述编译过程的概念（Vue语法 --> 原生语法）
Vue代码 --> Vue框架 --> 原生js代码
3.Vue模板语法
3.1 前端渲染方式
-
原生js拼接字符串：就是将数据以字符串的方式拼接到HTMl标签中
-
缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期维护变得逐渐困难起来
-
-
使用前端模板引擎
-
优点：有了代码规则，代码的可读性提高了，方便后期的维护
-
缺点：没有专门提供事件机制
-
-
使用Vue特有的模板语法
前端渲染 就是将数据填充到HTMl页面中
3.2 Vue模板语法概览
-
差值表达式
-
指令
-
事件绑定
-
属性绑定
-
样式绑定
-
分支循环结构
3.3 指令
1. 什么是指令
指令的本质就是自定义属性，指令的格式：以v-开始（比如：v-cloak）
2. v-cloak 指令用法
用来隐藏未编译的 Mustache 标签直到实例准备完毕，编译完成后在显示
-
提供样式
[v-cloak]{ display:none; }
-
在插值表达式所在的标签中添加v-cloak指令
<div v-cloak>{{msg}}</div>
3. 数据绑定指令
-
v-text：填充纯文本-
相比插值表达式更加简洁
<span v-text="msg"></span>
-
-
v-html：填充HTML片段-
存在安全问题
-
本网站内部数据可以使用，来自第三方的数据不可以使用
<div v-html="html"></div>
-
-
v-pre：填充原始信息-
显示原始信息，跳过编译过程
<span v-pre>{{ this will not be compiled }}</span>
-
4.数据响应式
什么是响应式：
-
html5 中的响应式（屏幕尺寸的变化导致样式的变化）
-
数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定：
-
数据绑定：将数据填充到标签中
v-once只编译一次
-
显示内容后不在具有响应式功能
-
应用场景：如果显示的信息后续不需要在修改，就可以使用
v-once,这样可以提高性能
5. 双向数据绑定
-
v-model：指令用法<input type='text' v-model='uname'/>
-
MVVM设计思想
-
M(model)
-
V(view)
-
VM(View-Model)
-
6. 事件绑定
1. Vue处理事件的方法
-
v-on：指令<inpunt type="button" v-on:click='num++'/>
-
v-on简写形式：<inpunt type='button'@click='num++'/>
2.事件函数的调用方法
-
直接绑定函数名称
<button v-on:click='say'> 点击 </button>
-
调用函数
<button v-on:click='say()'> 点击 </button>
3.事件函数参数传递
-
普通参数和事件对象
<button v-on:click='say("hi,$event")'> 点击 </button>
事件绑定-参数传递
-
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
-
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是
$event
-
4.事件修饰符
-
.stop：阻止冒泡，调用 event.stopPropagation()<a v-on:click.stop="handle">跳转</a>
-
.prevent：阻止默认行为，调用 event.preventDefault()<a v-on:click.prevent="handle">跳转</a>
-
.left：只当点击鼠标左键时触发(2.2.0版本可用)。<a v-on:click.left="handle">跳转</a>
-
.right： 只当点击鼠标右键时触发(2.2.0版本可用)。<a v-on:click.right="handle">跳转</a>
-
.middle：只当点击鼠标中键时触发(2.2.0版本可用)。<a v-on:click.middle="handle">跳转</a>
5.按键修饰符
-
.enter： 回车键<input v-on:keyup.enter='submit'/>
-
.delete：删除键<input v-on:keyup.delete='submit'/>
6. 自定义按键修饰符
-
全局 config.keyCodes 对象
//f1 :自定义按键名字
//112：按键的标识Vue.config.keyCodes.f1 = 112
可以使用下面代码得到按键的唯一标识：
<div id="app"> <input type="text" v-on:keyup="hander" v-model="info"> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ info:'' }, methods: { hander: function(event){ //在控制台打印出按键的唯一标识 console.log(event.keyCode) } } }) </script>
自定义按键修饰符的规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应 event.keyCode 的值。
7. 动态处理属性
-
v-bind指令语法<a v-bind:href='url'>跳转</a>
-
缩写形式
<a :href='url'>跳转</a>
8.样式绑定
1.class 样式处理
-
对象处理
<div v-bind:class=" active: isActive "></div>
-
数组语法
<div v-bind:class= "[activeClass, errorClass]"></div>
样式绑定相关语法细节
对象绑定和数组绑定可以集合使用
<div v-bind:class= "[activeClass, errorClass,{text:'isText'}]"></div>
class绑定的值可以简化操作
默认的class如何处理？默认的class会保留
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active{ border: 1px solid #000000; width: 100px; height: 100px; } .error{ background-color: #004444; } .text{ color: #ffff00; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:'isActive',error:'isError'}">哈哈哈哈</div> <div v-bind:class="[activeClass,errorClass,{text:'isText'}]">哈哈哈哈</div> <div v-bind:class="mainClass">哈哈哈哈</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ isActive:'true', isError:'true', activeClass:'active', errorClass:'error', isText:'text', mainClass:['active','error'] } }) </script> </body> </html>
2. style样式处理
-
对象语法
<div v-binf:style="{color:activeColor,fontSize:fonSize}"></div>
-
数组语法
<div v-bind:style="[baseStyles,overridingStyles]"></div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div v-bind:style="{border:borderStyle,color:colorStyle,width:widthStyle,height:heightStyle}">哈哈哈哈</div> <div v-bind:style="objectStyle"></div> <div v-bind:style="[baseStyles,objectStyle]">哈哈哈哈</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ colorStyle:'#fff', widthStyle:'100px', heightStyle:'120px', borderStyle:'1px solid red', objectStyle:{ border:'1px solid blue', width:'120px', height:'100px' }, baseStyles:{ backgroundColor:'#f4f444' } } }) </script> </body> </html>
9. 分支循环结构
1.分支结构
-
v-if：根据表达式的值来有条件地渲染元素。 -
v-else：为v-if或者v-else-if添加“else 块”。<div v-if=" max > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
-
v-else-if:表示v-if的“else if 块”。可以链式调用.<div v-if="tapy === 'A'"> A </div> <div v-else-if="tapy === 'B'"> B </div> <div v-else-if="tapy === 'C'"> C </div> <div v-else> Not A/B/C </div>
-
v-show：根据表达式之真假值，切换元素的display控制元素样式是否显示
2.v-if 和 v-show 的区别
-
v-if控制元素是否渲染到页面 -
v-show控制元素是否显示（已经渲染到了页面）
10. 循环结构
-
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>
-
v-for遍历对象<div v-for='(value, key, index) in object'> </div>
使用原生js遍历对象
var obj = { uname : 'Laity', age : 12, gender : 'male' } for (var key in obj){ console.log(key,obj[key]); }使用Vue遍历对象
<div id="app"> <div v-for="(value, key, index) in obj"> {{ value + '---' + key + '---' + index}} </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ obj:{ uname : 'Laity', age : 16, gender : 'male' } } }) </script>
-
v-if和v-for结合使用<div v-if='value==12' v-for='(value, key, index) in object'></div>
浙公网安备 33010602011771号