目录
1. Vue 概述2. Vue 基本使用2.1 Vue安装2.1.1 直接用 script 标签 引入2.1.2 NPM2.1.3 其它安装方式(略...)2.2 与传统开发模式对比2.3 Vue.js 之 HelloWorld 细节分析2.3.1 Vue实例参数2.3.2 插值表达式的用法2.3.3 Vue代码运行原理3. Vue模板语法3.1 模板语法概述3.1.1 理解前端渲染3.1.2 前端渲染方式3.1.3 **Vue模板语法概览**3.2 指令3.2.1 什么是指令3.2.2 v-cloak指令用法3.2.3 数据绑定指令3.2.4 数据响应式3.3 双向数据绑定指令3.3.1 什么是双向数据绑定3.3.2 v-model 指令用法3.3.3 MVVM设计思想3.4 事件绑定3.4.1 Vue如何处理事件?1. Vue 概述
尤雨溪:Vue.js 的创建者
年 2 月, Vue.js 正式发布
年 10 月 27 日,正式发布 1.0.0
年 4 月 27 日,发布 2.0 的预览版本
Vue是什么 ?
Vue(读音/vjuː/
,类似于 view) 是一套用于构建用户界面的 渐进式框架 ;vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。使用 Vue 将 helloworld 渲染到页面上:
Vue:渐进式 JavaScript 框架
声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建
官网:/v2/guide/
易用:熟悉 HTML 、 CSS 、 JavaScript 知识后,可快速上手 Vue;灵活:在一个库和一套完整框架之间自如伸缩;高效: 20kB 运行大小,超快虚拟 DOM。
2. Vue 基本使用
2.1 Vue安装
2.1.1 直接用 script 标签 引入
开发环境版本(包含了有帮助的命令行警告)
// 制作原型或学习,可以使用最新版本:<script src="/npm/vue/dist/vue.js"></script>
生产环境版本(优化了尺寸和速度)
<script src="/npm/vue"></script>
对于生产环境,推荐 链接 到 明确的版本号(避免新版本造成不可预期的破坏):
<script src="/npm/vue@2.6.12"></script>
2.1.2 NPM
构建 大型应用 时推荐使用 NPM 安装:
#最新稳定版$ npm install vue
2.1.3 其它安装方式(略…)
更多 >> 访问 官方文档 :/v2/guide/installation.html
2.2 与传统开发模式对比
原生JavaScript
<div id="msg"></div><script type="text/javascript">var msg = 'Hello World'var div = document.getElementById('msg')div.innerHTML= msg</script>
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>
Vue
<div id="app"><div>{{msg }}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {msg: 'HelloWorld'}})</script>
2.3 Vue.js 之 HelloWorld 细节分析
2.3.1 Vue实例参数
el:元素的挂载位置(值可以是 CSS 选择器 或 DOM 元素);
data:模型数据(值是一个 对象)
示例1:
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
2.3.2 插值表达式的用法
将数据填充到 HTML 标签中;
示例2:
<div id="app">{{ message }}</div><!--输出 Hello Vue! -->
插值表达式支持基本的计算操作
2.3.3 Vue代码运行原理
概述编译过程的概念( Vue 语法 → 原生语法)
3. Vue模板语法
3.1 模板语法概述
3.1.1 理解前端渲染
3.1.2 前端渲染方式
原生 js 拼接字符串;使用前端模板引擎;使用 vue 特有的模板语法。原生js拼接字符串
基本上就是将数据以字符串的方式拼接到 HTML 标签中,前端代码风格大体如下示。
var d = data.weather;var info = document.getElementById('info');info.innerHTML = '';for(var i=0;i<d.length;i++){var date = d[i].date;var day = d[i].info.day;var night = d[i].info.night;var tag = '';tag += '<span>日期:'+date+'</sapn><ul>'tag += '<li>白天天气:'+day[1]+'</li>'tag += '<li>白天温度:'+day[2]+'</li>'tag += '<li>白天风向:'+day[3]+'</li>'tag += '<li>白天风速:'+day[4]+'</li>'tag += '</ul>';var div = document.createElement('div');div.innerHTML = tag;info.appendChild(div);}
缺点:不同开发人员的代码风格差别很大,随着业
务的复杂,后期的维护变得逐渐困难起来。
使用前端模板引擎
以下是基于模板引擎art-template
的一段代码,与拼接字符串相比,代码明显规范了很多,它拥有自己的一套模板语法规则。
<script id="abc" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>{{each list as value i}}<li> 索引 {{i + 1}}:{{value}}</li>{{/each}}</ul>{{/if}}</script>
优点: 大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。
缺点: 没有专门提供事件机制。
3.1.3Vue模板语法概览
差值表达式;指令;事件绑定;属性绑定;样式绑定;分支循环结构。3.2 指令
3.2.1 什么是指令
指令的本质就是自定义属性。
Vue 中指令都是以v-
开头(比如:v-cloak
)
官网:/v2/api/#指令
3.2.2 v-cloak指令用法
v-cloak
:防止页面加载时出现闪烁
1)插值表达式存在的问题:“闪动”;
2)如何解决该问题:使用 v cloak 指令;
3)解决该问题的原理:先隐藏,替换好值之后再显示最终的值。
示例如下:
<style type="text/css">/*1、通过属性选择器 选择带有属性 v-cloak的标签,使其隐藏*/[v-cloak]{display: none; /* 元素隐藏 */}</style><body><div id="app"><!-- 2、 让带有插值语法的元素添加 v-cloak 属性,在数据渲染完场之后,v-cloak 属性会被自动去除,v-cloak 一旦移除也就是没有这个属性了,属性选择器就选择不到该标签对应的标签变为可见--><div v-cloak> {{msg}} </div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app', // 指定挂载位置:元素id 为 app 的元素data: {// data 里存储的模型数据msg: 'Hello Vue'}});</script></body></html>
3.2.3 数据绑定指令
v-text
填充纯文本;
用于将数据填充到标签中,作用与插值表达式类似,但没有闪动问题。相比插值表达式更加简洁。
如果数据中有HTML标签会将html标签一并输出。
注:此为 单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。
<div id="app"><!--注意:在指令中不要写插值语法 直接写对应的变量名称在 v-text 中赋值时不要再写插值语法--><p v-text="msg"></p><p><!-- Vue 中只有在标签的内容中才用插值语法 -->{{msg}}</p></div><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>
v-html
填充 HTML 片段;
用法和v-text
相似,但是它可以将 HTML 片段填充到标签中。
① 存在安全问题;
② 本网站内部数据可以使用(一般只在可信任内容上使用v-html
),永不用在用户提交的内容上(来自第三方的数据不可以用)。
示例:
<div id="app"><p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 --><p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> --><p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> --></div><script>let app = new Vue({el: "#app",data: {message: "<span>通过双括号绑定</span>",html: "<span>html标签在渲染的时候被解析</span>",text: "<span>html标签在渲染的时候被源码输出</span>",}});</script>
v-html
与v-text
区别在于,v-text
输出的是纯文本,浏览器不会对其再进行html解析,但v-html
会将其当 html 标签解析。
后输出。
v-pre
填充原始信息;
显示原始信息跳过编译过程;跳过这个元素和它的子元素的编译过程;一些静态的内容不需要编译时,加这个指令可以加快渲染。
示例:
<span v-pre>{{ this will not be compiled }}</span><!-- 显示的是{{ this will not be compiled }} --><span v-pre>{{msg}}</span><!-- 即使data里面定义了msg这里仍然是显示的{{msg}} --><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>
3.2.4 数据响应式
如何理解响应式
① html5 中的响应式(屏幕尺寸的变化导致样式的变化)
② 数据的响应式(数据的变化导致页面内容的变化)
什么是数据绑定
数据绑定:将数据填充到标签中
v-once
只编译一次
即,显示内容之后不再具有响应式功能;
执行 一次性 的插值【当数据改变时,插值处的内容不会继续更新】
<!-- 即使data里面定义了msg 后期我们修改了,仍然显示的是--> <!-- 第一次data里面存储的数据,即 Hello Vue.js --> <span v-once>{{ msg}}</span><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>
3.3 双向数据绑定指令
3.3.1 什么是双向数据绑定
当数据发生变化的时候,视图也就发生变化;
当视图发生变化的时候,数据也会跟着同步变化。
图示:
3.3.2 v-model 指令用法
<div id="app"><div>{{msg}}</div><div><!--输入框中内容改变的时候, 页面上的msg 会自动更新 --><input type="text" v-model='msg'></div></div>
注:v-model
指令限制在<input>
、<select>
、<textarea>
、components
中使用。
3.3.3 MVVM设计思想
M(model)V(view)VM(View Model)MVC
是后端的分层开发概念;MVVM
是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM
把前端的视图层,分为了 三部分Model
,View
,VM ViewModel
:
m(model)
数据层,Vue 中 数据层都放在data
里面;v(view / 视图)
Vue 中 view 即 我们的 HTML 页面;vm (view-model) 控制器 将数据和视图层建立联系
vm
即Vue的实例,就是vm
。
3.4 事件绑定
3.4.1 Vue如何处理事件?
v-on
指令:用来绑定事件
形式如:v-on:click
简写为@click
;
用法:
<input type='button' v-on:click='num++'/>
简写形式:
<input type='button' @click='num++'/>
v-on
事件函数中传入参数
<div id="app"><div>{{num}}</div><div><!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 --><button v-on:click='handle1'>点击1</button><!-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event --><button v-on:click='handle2(123,456,$event)'>点击2</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});</script>
如果觉得《Vue全家桶 之 Vue基础》对你有帮助,请点赞、收藏,并留下你的观点哦!