Vue学习笔记 一
Vue学习笔记
1、Vue基础指令
1.1 什么是Vue?
Vue.js 是一套响应式的 JavaScript 开发库。Vue.js 自问世以来所受关注度不断提高，在现在的市场上，Vue.js 是非常流行的 JavaScript 技术开发框架之一。
Vue是一款国产前端框架，它的作者尤雨溪（Evan You）是一位美籍华人，2014年2月，尤雨溪开源了一个前端开发库 Vue.js，2015年发布1.0.0版本，2016年4月发布2.0版本，目前，尤雨溪全职投入 Vue.js 的开发与维护，立志将 Vue.js 打造成与 Angular/React 平起平坐的世界顶级框架。
1.1.1 读音★★★
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
1.1.2 特点★★★
- Vue是一个遵循MVVM模式的渐进式框架
-
Vue比较易学，体积更小，灵活，高效
-
Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库
-
Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。
1.2 数据渲染
1.2.1 Vue.js的引入★★★★★
前面我们说了Vue的一些特点，那下面我们来看一下我们如何具体使用Vue呢？
我们一般学一门语言，都会先从打印hello world学起，那么我们来看一下，Vue如何打印Hello World呢？
使用Vue我们有两种方法，一种方法类似于使用JQuery，我们可以引入Vue.js文件，还有一种方式是借助于npm来安装Vue的脚手架，做到真正的前后端分离，我们先来看一下第一种方式。
我们可以通过下面的方式引入Vue的文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue">script>
1.2.2 数据绑定★★★★
上面我们说了如何导入Vue的js文件，下面我们来看一下我们如何在Vue中绑定数据，并把数据显示到页面上呢？
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
<h3>{
{message}}h3>
div>
在script的标签中实例化一个Vue的对象，并定义绑定的数据
new Vue({
el: "#app",
data:{
message: "Hello World"
}
})
页面显示效果如下所示:
这样的话我们已经创建了一个Vue的应用，看起来像是渲染模版字符串一样，但是Vue在背后做了大量的工作，这样的话DOM和数据就建立绑定关系。
1.2.3 语法★★★★★
在上面的案例中我们把Hello World渲染到了页面上，那我们来看一下，这个语法结构是什么意思呢？
前端渲染
<div id="app">
<h3>{
{message}}h3>
div>
数据渲染到页面上，首先我们需要提供一个标签用于填充数据，这个标签我们定义了一个id属性为app,在标签中我们用小胡子插值表达式进行数据的填充。
Vue对象定义
- 定义完页面结构，我们需要在js中通过 new Vue()创建一个Vue的实例化对象
- 在构造函数中以对象的形式做一些配置，这些配置中比较重要的有el、data两个属性
el定义可以渲染数据的DOM结构data定义可以渲染到页面上的数据，跟DOM结构建立关联关系
通过上述语法结构，我们就简单完成用Vue打印Hello World的应用
1.3 指令
Vue的指令是带有特殊前缀v-的HTML特性，他可以绑定一个表达式，并且把一些特性作用到DOM结构上去。
下面我们来看一下常见的指令。
1.3.1 v-cloak★★★★★
v-cloak指令的作用防止页面加载时出现闪烁问题
那么为什么会有闪烁问题呢？代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题。
下面我们看一下案例，如何使用
<html>
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
style>
<body>
<div id="app">
<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>
1.3.2 v-text ★★★★
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
我们来看一下指令如何使用
<div id="app">
<p v-text="msg">p>
<p>
{
{msg}}
p>
div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
1.3.3 v-html ★★★★★
- 用法和v-text 相似 但是他可以将HTML片段填充到标签中
- 可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 - 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
参照v-text,v-html,{ {}}打印的内容的区别如下:
<div id="app">
<p v-html="html">p>
<p>{
{message}}p>
<p v-text="text">p>
div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "通过双括号绑定",
html: "html标签在渲染的时候被解析",
text: "html标签在渲染的时候被源码输出",
}
});
script>
1.3.4 v-pre★★★★
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{
{ this will not be compiled }}span>
<span v-pre>{
{msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
1.3.5 v-once★★★
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<span v-once>{
{ msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
1.3.6 v-on★★★★★
- 用来绑定事件的
- 形式如 v-on:事件名字 比如 v-on:click 缩写为 @click
<div id="app">
<button v-on:click="nums++">自增button>
<button @click="nums--">自减button>
<p>数量:{
{nums}}p>
div>
<script>
new Vue({
el: "#app",
data:{
message: "Hello World",
nums:1,
}
})
script>
1.4 双向数据绑定
所谓双向数据绑定也就是:
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
最能体现双向数据绑定的质量就是v-model
1.4.1 v-model★★★★★
- v-model是一个指令，限制在
、