Vue笔记（更新中）
1、Vue概述
1.1 Vue 是什么？
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
-
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
1.2 作者
-
尤雨溪:Vue.js的创建者
-
2014年2月，Vue.js正式发布
-
2015年10月27日，正式发布1.0.0
-
2016年4月27日，发布2.0的预览版本
1.3 简述
-
Vue:渐进式JavaScript框架
-
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
-
易用:熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
-
灵活:在一个库和一套完整框架之间自如伸缩
-
高效:20kB运行大小，超快虚拟 DOM
2、Vue过渡之helloworld
2.1 代码
-
dom操作
<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.2 分析
-
实例参数分析
-
el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
-
data:模型数据(值是一个对象)
-
-
插值表达式用法
-
将数据填充到HTML标签中
-
插值表达式支持基本的计算操作
-
-
Vue代码运行原理分析
-
概述编译过程的概念(Vue语法→原生语法)
-
2.3 idea设置vue属性提示
-
先复制好下面的内容
@tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped,@keyup.enter,:class,:style,v-show,:key,@keyup,@submit,@submit.prevent,@mouseenter,@mouseleave,
@mouseout,@mouseover
3、Vue模板剖析
3.1 模板语法概述
-
如何理解前端渲染?
-
把数据填充到HTML标签中
-
模板+数据=前端渲染
-
3.2 渲染方式
3.2.1 把字符串渲染到页面上有哪些方式？
-
利用原生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> -
-
利用Vue模板语法
-
文档碎片 document.createDocumentFragment
-
利用es6 “ 反引号拼接字符串
3.2.2 我们已经用过哪些模板语法了？
-
插值语法
3.3 Vue模板语法
3.3.1 插值表达式
-
{{ }}
3.3.2 指令
-
指令是什么？
-
指令就是一个自定义属性
-
Vue中指令都是以 v- 开头
-
3.3.2.1 v-cloak 指令
-
插值表达式存在的问题:“闪动”
-
如何解决该问题:使用v-cloak指令
-
解决该问题的原理:先隐藏，替换好值之后再显示最终的值 v-cloak
<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 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
3.3.2.2 数据绑定指令
3.3.2.2.1 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>
3.3.2.2..2 v-html 指令
作用：填充HTML片段
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当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>
3.3.2.2.3 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.3.2.3 数据响应指令
3.3.2.3.1 如何理解响应式
-
html5中的响应式(屏幕尺寸的变化导致样式的变化)
-
数据的响应式(数据的变化导致页面内容的变化)
3.3.2.3.2 什么是数据绑定
-
数据绑定:将数据填充到标签中
3.3.2.3.3 v-once 指令
作用：只编译一次
-
显示内容之后不再具有响应式功能
<span v-once>{{ msg }}</span>
<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.3.2.4 双向数据绑定指令
3.3.2.4.1 MVVM设计思想
-
M(model) : 数据层 Vue 中 数据层 都放在 data 里面
-
V(view) ：Vue 中 view 即 我们的HTML页面
-
VM(view-model) ：控制器 将数据和视图层建立联系,vm 即 Vue 的实例 就是 vm
3.3.2.4.2 什么是双向数据绑定
-
当数据发生变化的时候，视图也就发生变化
-
当视图发生变化的时候，数据也会跟着同步变化
3.3.2.4.3 v-model 指令
作用：实现双向绑定？
3.3.2.4.4 使用场景
v-model是一个指令，限制在 <input>、<select>、<textarea>、components（组件） 中使用
<div id="app">
<div>{{msg}}</div>
<div>
当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>