Vue.js基础

什么是Vue.js

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

Vue.js 基本代码 和 MVVM 之间的对应关系

Vue之 - 基本的代码结构和插值表达式、v-cloak

//导入vue的包
<script src="js/vue-2.4.0.js"></script>

//将来new 的Vue实例 会控制这个元素中的所有内容 Vue 实例所控制的这个元素区域就是我们的 V
<div id="app">
	<p>{{ msg }}</p>
</div>

<script>
	//创建一个Vue实例
	//当我们导入包之后 在浏览器内存中 就多了一个vue的构造函数
	//注意:我们new 出来的这个vm对象 就是我们MVVM中 VM 调度者
	var vm = new Vue({
		el:"#app",//表示 我们new的这个Vue实例 要控制页面上的哪个区域
		data:{//data属性中 存放的是el中要用的数据
			msg:"欢迎学习vue"//通过vue提供的指令 很方便的就能把数据渲染到页面上
	//程序员不再手动操作DOM元素了 [前端vue之类的框架 不提倡我们去手动操作DOM元素了]
		}
	})
</script>

使用v-cloak 能够解决插值表达式闪烁的问题

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

Vue指令之v-text和v-html

v-text
用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。

<span v-text="message"></span>
<!-- 简写方式 -->
<span>{{message}}</span>

v-html
如果你想输出真正的 HTML，你需要使用 v-html指令，v-text仅渲染标签，不能解析 HTML 代码。

   <p v-html="message"></p>
   
   <script type="text/javascript">
       var app = new Vue({
       el: '#app', //element
       data: {
            message: '<strong>Hello</strong> Vue!',
           }
       })
   </script>

Vue指令之v-bind和v-on

v-bind：是vue中 提供用于绑定属性的指令
v-bind中 可以写合法的js表达式
注意: v-bind 指令可以被简写成:要绑定的属性

<input type="button" value="按钮" v-bind:title="mytitle+'123'">

//简写
<input type="button" value="按钮" :title="mytitle+'123'">

vue中提供了v-on:事件绑定机制
注意: v-on缩写是@

<input type="button" value="按钮" v-on:click="alert('hello')">
<input type="button" value="按钮" @click="alert('hello')">

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

Vue指令之v-model和双向数据绑定

简易计算器案例

<div id="app">
    <input type="text" v-model="n1">
    
    <select v-model="opt">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">÷</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" v-on:click="getResult">

    <input type="text" v-model="result">

  </div>

// 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '0'
      },
      methods: {
        getResult() {
          switch (this.opt) {
            case '0':
              this.result = parseInt(this.n1) + parseInt(this.n2);
              break;
            case '1':
              this.result = parseInt(this.n1) - parseInt(this.n2);
              break;
            case '2':
              this.result = parseInt(this.n1) * parseInt(this.n2);
              break;
            case '3':
              this.result = parseInt(this.n1) / parseInt(this.n2);
              break;
          }
        }
      }
    });

Vue指令之v-for和key属性

1. 迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

2. 迭代对象中的属性

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3. 迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

Vue指令之v-show和v-if

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
v-show

<h1 v-show="false">被隐藏了</h1>
<h1 v-show="true">显示</h1>

v-if
学过javascript的都知道if语句后面有if else 和 if else if
v-if 后也可以有 v-if v-else v-else-if
注：限制前一兄弟元素必须有 v-if 或 v-else-if

<div id="app">
    <input type="text" name="" id="" v-model="str">
    <h1 v-if="str == 'A'">str的值为{{str}}时显示</h1>//输入A时显示
    <h1 v-else-if="str == 'B'">str的值为{{str}}时显示</h1>//输入B时显示
    <h1 v-else>str的值为{{str}}时显示</h1>//输入的既不是A也不是B时显示
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            str:'C'
        }
    })
</script>

v-slot

有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。

注意事项：
这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。

一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

v-pre
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
即使data里面定义了msg这里仍然是显示的{{msg}}

<span v-pre>{{ this will not be compiled }}</span>   //显示的是{{ this will not be compiled }}

v-once
只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

常见用法如下：
当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的

<div id="app">
	<p v-once>{{msg}}</p>  //msg不会改变
	<p>{{msg}}</p>
	<input type="text" v-model = "msg" name="">
</div>

<script type="text/javascript">
	let vm = new Vue({
		el : '#app',
		data : {
			msg : "hello"
		}
	});
</script>