Vue入门学习笔记（一）

1、什么是Vue

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。它是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。

1.1 特点；MVVM

• Vue是一个遵循MVVM模式的渐进式框架。
• Vue比较易学，体积更小，灵活，高效。
• Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库。
• Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。
  
• MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
• M：即Model，模型，包括数据和一些基本操作，指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
• V：即View，视图，页面渲染结果，指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”
• VM：即View-Model，模型与视图间的双向操作，指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性。

1.2 数据渲染

1.2.1 Vue.js的引入

1. CDN
   对于制作原型或学习，你可以这样使用最新版本：

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

2. NPM
   在用Vue构建大型项目时推荐使用NPM安装，NPM能够很好的和诸如webpack或Browserify模块打包器配合使用，同时 Vue 也提供配套工具来开发单文件组件。

    # 最新稳定版
   $ npm install vue

1.2.2 数据绑定

上面我们说了如何导入Vue的js文件，下面我们来看一下我们如何在Vue中绑定数据，并把数据显示到页面上呢？

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系统：

 <div id="app">
     <h3>{{message}}</h3>
 </div>

  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-text

• 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>

1.3.2 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> <!-- 输出：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>

1.3.3 v-bind

• v-bind 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，主要是绑定属性。
• v-bind:href 可以缩写为 :href

 <!-- 绑定一个属性 -->
 <img v-bind:src="imageSrc">
 <!-- 缩写 -->
 <img :src="imageSrc">

1.3.4 v-on

• v-on用来绑定事件的，绑定的事件从methods中获取。
• 语法如：v-on:click 缩写为 @click;

	<div id="app">
       <div>{{nums}}</div>
       <div>{{message}}</div>

       <div>
           <!-- v-on给元素绑定事件 -->
           <!-- 指令中的数据无需加this或{{}} -->
           <button v-on:click="nums++">增加</button>
           <!-- v-on可以使用@替代 -->
           <button @click="nums--">减少</button>

           <!-- 如果逻辑比较复杂的话，我们无法用表达式实现，需要自己定义一个函数 -->
           <button v-on:click="reverse()">反转字符串</button>
       </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                message: "Hello World",
                nums:1,
            },
            methods:{
                reverse(){
                    this.message = this.message.split("").reverse().join("");
                }
            }
        })
    </script>

事件修饰符

• 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
• Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
• 修饰符是由点开头的指令后缀来表示的 比如 v-on:click.stop 阻止事件冒泡。

 <!-- 阻止单击事件继续传播 -->
 <a v-on:click.stop="doThis"></a>

 <!-- 提交事件不再重载页面 -->
 <form v-on:submit.prevent="onSubmit"></form>

 <!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
 <a v-on:click.stop.prevent="doThat"></a>

 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
 <!-- 即事件不是从内部元素触发的 -->
 <div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){
              	console.log("你按了回车键")
              },
              alertMe:function(){
              	console.log("回车+空格键");
              },
        }
    })

</script>

常见的事件修饰符有:
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右

自定义修饰符

但是有时候Vue内置的修饰符可能无法满足我们的要求，那么在Vue中可以通过config.keyCodes自定义按键修饰符别名。

 <div id="app">
    <!--预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法-->
    <input type="text" v-on:keydown.f5="prompt()">
 </div>

 <script>
    Vue.config.keyCodes.f5 = 116;
    
    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
 </script>

1.3.5 v-model

• v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用,
• 通过v-model绑定后，视图输入内容的变化会改变指令绑定的数据，数据发生变化也会直接作用到视图上，所以这个指令在提交表单数据时应用最多，无需在进行DOM查询获取表单的数据。

	<div id="app">
      <div>{{msg}}</div>
      <div>
          <!---当输入框中内容改变的时候，  页面上的msg  会自动更新-->
        <input type="text" v-model='msg'>
      </div>
 	</div>
 	<script>
        new Vue({
            el: "#app",
            data:{
                msg: "Hello Vue.js",
            }
        })
 	</script>

1.3.6 v-once

• 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
   <span v-once>{{ msg}}</span>    
   <script>
   	new Vue({
       	el: '#app',
       	data: {
           	msg: 'Hello Vue.js'
       	}
   	});
   </script>

1.3.7 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>

1.3.8 v-cloak

v-cloak指令的作用防止页面加载时出现闪烁问题
那么为什么会有闪烁问题呢？代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题。

<html>
	 <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>