Vue基础

2018-01-16

一、概念

基础概念

单页面应用（Single Page Application，SPA），资源是动态加载到页面，不需要服务器控制页面跳转
响应式设计（Responsive web design，RWD），不同设备分辨率自适应。
数据导向，区别于页面导向，通过后台REST服务获取JSON，而不是通过服务器渲染动态页面来实现。
数据链，连通数据的链路，修改元数据的值来触发一系列数据的更新。
函数式编程（Functional Programming），是一种结构化的编程方式，核心是根据元数据生成新的衍生数据，可通过lambda表达式。Vue中通过computed计算属性选项，以生成衍生数据对象。

MVVM（Model-View-ViewModel）

从MVC过度到MVVM，使用ViewModel替代Controller，分离View和Model，它们之间的松散耦合，通过数据绑定起到两者的桥梁作用。常见的有Vue、React、和angular。

View，视图层负责展示视图
ViewModel，一方面响应用户事件并向模型层发送请求，另一方面将模型层返回的数据通过数据绑定在视图中展现
Model，模型层负责处理交互请示并返回响应的数据

Vue

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

虚拟DOM，DOM操作成本很高，在渲染流程中采用虚拟DOM性能更好。
双向数据绑定，解耦视图与数据。由于实现原理使用的Object.defineProperty是ES5中一个无法shim（自定义扩展）的特性，因此无法在IE8及以下使用。
轻量级
可复用的组件
前端路由

Vue Devtools

一个拓展程序，用于在浏览器查看Vue组件和Vuex数据。

源码编译方法如下。

$ npm install yarn -g # 安装yarn
$ yarn -V

$ git clone https://www.github.com/vuejs/devtools.git
$ cd devtools
$ yarn install
$ yarn run build
# chrome开发者模式，加载已解压的拓展程序

双向数据绑定原理

核心是采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()对每个属性的get和set进行拦截。在数据发生变化的时候发布消息给订阅者，触发相应的监听回调。
使用Object,defineProperty()就能完成一个简单的双向绑定，但是效率比较低。
观察者模式让双向绑定更有效率，它是一对多的模式，一指的是修改的一处数据，凡是用了这个数据的地方都更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p id="name1"></p>
  <input id="name2" type="text">
  <script>
    let name1=document.getElementById("name1");
    let name2=document.getElementById("name2");
    let key ='profile';
    let store ={};
    let obj={
      profile:''
    }
    //对象属性配置表，包含configurable，enumerable，writable，value，set，get等。可以通过defineProperty进行配置
    console.log(Object.getOwnPropertyDescriptor(obj,'profile'))

    // Object.defineProperty是ES5中一个无法被shim的特性，所以Vue无法运行在IE8及以下版本浏览器上
    Object.defineProperty(obj,key,{
      set(value){
        name1.innerText=value;
        store[key]=value;
      },
      get(){
        return store[key]
      }
    })
    name2.addEventListener('keyup',function (){
      obj[key]=this.value;
      console.log(obj[key])
    })
  </script>
</body>
</html>

二、Vue语法

插值绑定

文本绑定，使用双大括号（Mustache语法）绑定变量、值或表达式
HTML插值，使用v-html指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>文本插值</title>
  <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <!--数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
  Mustache 标签将会被替代为对应数据对象上property的值。
  无论何时，绑定的数据对象上property发生了改变，插值处的内容都会更新。-->
  <p>{{message}}</p>
  <!--v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新-->
  <p v-once>{{message}}</p>
  <p>{{date}}</p>
  <!--双大括号会将数据解释为普通文本，而非 HTML 代码-->
  <p>{{rawHtml}}</p>
  <!--使用 v-html 指令输出真正的 HTML-->
  <p v-html="rawHtml"></p>
  <!--js表达式-->
  <p>{{message.split('').reverse().join('')}}</p>
</div>

<script type="text/javascript">
  var data = {
    message: 'hello vue',
    date: '对象：' + new Date().toLocaleString(),
    rawHtml: '<span style="color: red">red</span>'
  }

  // freeze会阻止修改现有的property，也意味着响应系统无法再追踪变化
  Object.freeze(data)

  // 将创建的Vue应用挂载到一个DOM元素上（#app）
  var app = new Vue({
    el: '#app',
    //对象写法，同时写会被覆盖
    data: data,
    //函数写法，同时写会被覆盖
    data: function () {
      return {
        message: 'hello vue',
        date: '函数：' + this.getTime(),
        rawHtml: '<span style="color: red">red</span>'
      }
    },
    // es6写法，同时写会被覆盖
    data() {
      return {
        message: 'hello vue',
        date: 'ES6：' + this.getTime(),
        rawHtml: '<span style="color: red">red</span>'
      }
    },
    methods: {
      getTime() {
        return new Date().toLocaleString()
      }
    }
  })
  // app是上方创建的vue对象名，可更改。
  // get
  console.log(app.message)
  // set，当使用data函数时可以实时改变DOM。如果使用data对象，会由于freeze方法导致失效
  app.message = 'hello vue2'

  //$代表是vue实例本身的方法
  console.log(app.$data) //数据对象
  console.log(app.$el) //挂载元素
</script>

<!-- 数据和DOM都是响应式的。在chrome里的console，get和set数据，DOM会实时响应
 > app.message
 "hello vue"
 > app.message='hello herr'
 "hello herr"-->

</body>
</html>

属性绑定

v-bind指令，将元素的某个属性和vue实例的某个属性绑定。支持属性、类名和样式等绑定，可省略不写，只保留冒号。
类名和样式绑定，比较特殊，除了字符串，还可以通过数组和对象的方式，来为节点动态绑定类名属性。
加冒号的，说明值是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量。
Vue中父组件通过prop传值给子组件时，只有传递字符串常量时，不采用v-bind形式，其余情况(Number类型，Boolean类型，数组，对象等）均采用v-bind形式传递。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>操作Class和Style</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!--操作元素的 class 列表和内联样式，可以用 v-bind 处理它们，只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。-->
<body>
<div id="app">
  <!--类名绑定，可以使用字符串、对象和数组三种方式-->
  <!--字符串方式-->
  <p class="bigSize" v-bind:class="classStr">{{message}}</p>
  <!--对象方式。将类名作为对象键名，当键值判定js为真，类名被绑定到节点上-->
  <p class="bigSize" v-bind:class="{red:isRed,bold:isBold}">{{message}}</p>
  <!--数组方式，以应用一个 class 列表-->
  <p v-bind:class="[isRed?'red':'',isBold?'bold':'']">{{message}}</p>

  <!--样式绑定，样式必须是键值对的形式-->
  <!--使用对象语法绑定内联样式-->
  <p v-bind:style="{color:redColor,fontSize:size}">{{message}}</p>
  <!--直接绑定到一个样式对象-->
  <p v-bind:style="styleObject">{{message}}</p>
  <!--数组语法可以将多个样式对象应用到同一个元素-->
  <p v-bind:style="[styleObject, boldStyleObject]">{{message}}</p>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      message: 'hello',
      isRed: true,
      isBold: true,
      classStr:'red bold',
      redColor:'red',
      size:'20px',
      styleObject: {
        color: 'red',
        // 可以用驼峰式 (camelCase)
        fontSize: '20px',
        // 当短横线分隔，记得用引号
        // 'font-size':'20px'
      },
      boldStyleObject: {
        fontWeight:700
      }

    }
  })
</script>

<style>
  .bigSize{
    font-size: 20px;
  }
  .red{
    color: red;
  }
  .bold{
    font-weight: 700;
  }

</style>
</body>
</html>

事件绑定

v-on指令，将事件代码绑定到DOM节点上。可简写成@形式。
修饰符，可按顺序叠加
点击事件@click。键盘事件@keyup，@keydown。鼠标事件@mouseup，@mousedown。
事件有捕获阶段和冒泡阶段，捕获阶段由外向内触发（window->document->body->div->a），冒泡阶段由内向外触发（a->div->body->document->window）

名称	说明
.stop	事件触发时，阻止事件冒泡
.prevent	事件触发时，阻止元素默认行为
.capture	添加事件侦听器时使用事件捕获模式，会在捕获时直接触发。会比冒泡优先执行。
.once	事件触发一次后解除监听
.self	限制事件仅作用于节点自身时触发，冒泡到该元素时不会触发，2.1.4以上
.passive	移动端，限制事件永不调用preventDefault方法，2.3.0以上。一般用在滚动监听@scoll，@touchmove等，让内核线程跳过判断，提高流畅度

按键修饰符，允许将按键键值作为修饰符来使用。

名称	说明
.delete/tab/enter/esc/left/right/up/down	删除/制表/回车/退出/左/右/上/下，配合键盘事件使用。
.left/right/middle	左键/右键/中键，配合鼠标事件使用，2.2.0以上
.ctrl/alt/shift/meta	ctrl键/alt键/Shift键/meta键，配合点击事件使用，2.1.0以上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>事件绑定修饰符</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <!--未指定form表单的action，会提交到当前url，页面会被重新加载，console清空-->
  <form @submit="handleSubmit">
    <h2>不使用修饰符</h2>
    <button type="submit">提交</button>
  </form>

  <!--添加prevent修饰符后，会阻止form的提交事件-->
  <form @submit.prevent="handleSubmit">
    <h2>使用修饰符</h2>
    <button type="submit">提交</button>
  </form>

  <!--事件函数不必传参时，不能带()。也可手动传入$event对象-->
  <p><input type="text" @keyup.enter="enterKeyup" @keyup.esc="escKeyup($event)" @keyup.left="leftKeyup" @keyup.up="upKeyup" @mousedown.right="rightMousedown"></p>

  <h1 @click.ctrl="ctrlClick" @click="notCtrlClick">按住ctrl再点我</h1>

  <button onClick="console.log('button clicked')">DOM原生事件，正常</button>
  <button @click="btnClick">在methods中定义方法，正常</button>
  <!--以下写法会报错，Vue默认会解析为this.console.log，导致会去当前实例化vue的methods中找console方法-->
  <button @click="console.log('button clicked')">直接console.log，报错</button>

    <div @click="log(1)">
    <div @click.stop="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a href="javascript:console.log('x')">嵌套点击，事件2使用了stop，触发后会阻止冒泡，最后才会执行a默认href事件。如点击a标签，会依次打印3、2、x。如点击div标签，会依次打印3、2。</a>
      </div>
    </div>
  </div>
  
  <div @click="log(1)">
    <div @click="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a @click.prevent="log(4)" href="javascript:console.log('x')">嵌套点击，prevent阻止了a标签默认href事件。如点击a标签，会依次打印4、3、2、1。如点击div标签，会依次打印3、2、1。</a>
      </div>
    </div>
  </div>

  <div @click="log(1)">
    <div @click.capture="log(2)">
      <div @click="log(3)" style="background-color: gray">
        <a @click="log(4)" href="javascript:console.log('x')">嵌套点击，事件2使用了capture，优先捕获执行。如点击a标签，会依次打印2、4、3、1、x。如点击div标签，会依次打印2、3、1。</a>
      </div>
    </div>
  </div>

  <div @click="log(1)">
    <div @click="log(2)">
      <div @click.self="log(3)" style="background-color: gray">
        <a @click="log(4)" href="javascript:console.log('x')">嵌套点击，事件3使用了self，只有当事件是从元素本身点击时才触发。如点击a标签，事件3不是本身触发，不会执行，会依次打印4、2、1、x。如点击div标签，会依次打印3、2、1。</a>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      times:0
    },
    methods: {
      handleSubmit() {
        //`${ }`是模版字符串
        console.log(`submit ${++this.times} times`)
      },
      enterKeyup(event){
        console.log(event)
      },
      escKeyup(event){
        console.log(event)
      },
      leftKeyup(event){
        console.log(event)
      },
      upKeyup(event){
        console.log(event)
      },
      rightMousedown(event){
        console.log(event)
      },
      ctrlClick(event){
        console.log(event)
      },
      notCtrlClick(event){
        if (event.ctrlKey){
          console.log(event)
        }
      },
      btnClick(){
        console.log('button clicked')
      }
    }
  })
</script>

</body>
</html>

双向绑定

v-model指令，为可输入元素创建双向数据绑定，根据元素类型自动更新元素。
v-model和v-show是Vue内置，开发者无法自定义的指令。
v-model修饰符，为其后缀以丰富用户输入的行为。

名称	说明
.lazy	将用户输入的数组赋值于变量的时机由输入时延迟到数据改变时
.number	自动转换用户输入为数值类型
.trim	自动过滤用户输入的首尾空白字符

条件渲染和列表渲染

v-if,v-elseif,v-else
v-show,切换元素的display属性
v-for,可以实现数组或对象键值对的列表渲染，数组使用index，键值对使用key。

当使用push、pop、shift、unshift、sort、reverse等方法时，视图会同步更新。如直接使用下标/键名为数组/对象设置成员时，不会将其加入数据响应式系统。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>指令</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
  指令 attribute 的值预期是单个 JavaScript 表达式-->
<body>
	<div id="app">

    <!--绑定元素属性-->
		<p v-bind:title="alert">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
    <!--v-bind 缩写-->
		<p :title="alert">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
    <!--2.6.0新增的动态参数-->
    <p v-bind:[attr]="attrVal" v-on:[event]="eventVal">动态参数</p>

    <!--条件，if如果是false，不会渲染在dom中-->
		<p v-if="seen">用v-if看到你了</p>

    <!--条件，和if的区别是无论如何都会渲染在dom中，使用display来切换-->
    <h1 v-show="seen">用v-show看到你了</h1>

    <!--多个元素，可以把一个template元素当做不可见的包裹元素-->
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else-if="loginType === 'mobile'">
      <label>Mobile</label>
      <!--相同key值用来复用，当username输入后，app.loginType='mobile'切换后，输入内容不会丢失。-->
      <input placeholder="Enter your mobile" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

    <!--循环-->
		<div>
			<ol>
        <!--index可选，key用于复用dom节点，不指定不影响功能，但会有警告-->
				<li v-for="(todo,index) in todos" :key="todo.id">{{todo.text}} , index:{{index}}</li>
        <!--也可以使用of作为分隔符-->
        <li v-for="todo of todos">{{todo.text}}</li>
			</ol>

      <ul>
        <!--也可以用 v-for 来遍历一个对象的 property，后两个参数可选-->
          <li v-for="(value,name,index) in object">
            {{name}}:{{ value }}
          </li>
      </ul>
		</div>

    <!--表单输入和应用状态之间的双向绑定-->
		<input type="text" v-model="message">

    <select multiple v-model="multiSelect">
      <option value=1>选项1</option>
      <option value=2>选项2</option>
      <option value=3>选项3</option>
    </select>

    <!--事件监听，v-on缩写-->
    <p>{{message}}<button v-on:click="reversemessage">反转消息1</button><button @click="reversemessage">反转消息2</button></p>

    <!--双向绑定的等价写法，需要属性绑定+事件监听-->
		<input type="text" v-bind:value="message2" v-on:input="message2=$event.target.value">

	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
      data:{
        message: 'hello vue',
        message2: 'hello vue2',
        alert: '时间：' + new Date().toLocaleString(),
        seen: false,
        loginType:'username',
        todos: [{id:1, text: '学习 JavaScript' }, { id:2,text: '学习 css' }, { id:3,text: '学习 html' }],
        attr:'style',
        attrVal:'color:red',
        event:'click',
        eventVal:'alert("click")',
        object:{
          id:1,
          text: '学习 JavaScript'
        },
        multiSelect:[1,3]
      },
			methods: {
				reversemessage: function () {
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
	</script>

</body>
</html>

生命周期

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>{{title}}</p>
  <button @click="update">update</button>
  <button @click="destroy">destroy</button>
</div>

<script type="text/javascript">

  var app = new Vue({
    el: '#app',
    data() {
      return {
        title: 'hello data'
      }
    },
    methods: {
      hello() {
        console.log('hello method')
      },
      update(){
        this.title='update data'
      },
      destroy(){
        this.$destroy()
      }
    },
    // 生命周期钩子的 this 上下文指向调用它的 Vue 实例
    beforeCreate(){
      console.log("...beforeCreate...")
      console.log(this.$el)  //undefined
      console.log(this.$data) //undefined
      this.hello() // TypeError: this.hello is not a function
    },
    created(){
      console.log("...created...")
      console.log(this.$el)  //undefined
      console.log(this.$data) //title: "hello data"
      this.hello() // 后续都可调用
    },
    beforeMount(){
      console.log("...beforeMount...")
      console.log(this.$el)//还未渲染数据，如下
      /*<div id="app">
        <p>{{title}}</p>
        <button @click="update">update</button>
        <button @click="destroy">destroy</button>
      </div>*/
      console.log(this.$data)
    },
    mounted(){
      console.log("...mounted...")
      console.log(this.$el)// 已加载
      /*<div id="app"><p>hello data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) //title: "hello data"
    },
    beforeUpdate(){ //点击update按钮触发
      console.log("...beforeUpdate...")
      console.log(this.$el) // el还未update
      /*<div id="app"><p>hello data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) // data已更新，title: "update data"
    },
    updated(){
      console.log("...updated...")
      console.log(this.$el) // el已更新
      // /*<div id="app"><p>update data</p> <button>update</button> <button>destroy</button></div>*/
      console.log(this.$data) // data已更新，title: "update data"
    },
    beforeDestroy(){ //点击destroy按钮触发
      console.log("...beforeDestroy...")
      console.log(this.$el)
      console.log(this.$data)
    },
    destroyed(){
      console.log("...destroyed...")
      console.log(this.$el)
      console.log(this.$data)
    }
  })
</script>

</body>
</html>

三、Vue选项

数据和方法

数据(data)

data可接受的类型有对象和函数两种，定义组件时只能使用函数类型。

属性(props)

props可以为组件注册动态特性，props选项可以是数组或者对象类型，用于接受从父组件传递过来的参数。可使用类型检测type、默认值default、校验规则required、validator等。

方法(methods)

methods中的方法将被绑定到Vue实例上，因此方法中的this会自动指向Vue实例。如使用箭头函数，this将会指向浏览器内置对象windows，因此不要用箭头函数在其中定义方法。

计算属性(computed)

当数据链上出现复杂衍生数据时，可以使用computed减轻模板上的业务负担。computed依赖于响应式属性，因此当且仅当响应式属性变化时，computed才会重新计算。computed和methods一样，不能通过箭头函数声明，也会被混入Vue实例，可以通过this调用。

侦听属性(watch)

watch属性更注重于处理数据变化时的业务逻辑，相比computed，还可以异步修改数据。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>计算属性和侦听属性</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>Original message: "{{message}}"</p>
  <p>Reversed message: "{{message.split('').reverse().join('')}}"</p>
  <p>Computed Reversed message: "{{ reversedMessage }}"</p>
  <p>Method Reversed message: "{{ reversedMessage2() }}"</p>
  <p>First name:{{firstName}}</p>
  <p>Last name:{{lastName}}</p>
  <p>Full name:{{fullName}}</p>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      message: 'hello',
      firstName: 'Foo',
      lastName: 'Bar',
    },
    // 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时（message值变化）才会重新求值。
    // 计算属性以函数形式声明，但不接受参数只能以属性的方式调用。this指向vue实例，因此可以获取vue实例的可见属性
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      },
      fullName: {
        // computed默认只有getter，没有setter。
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // 可自行指定setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    },
    // 侦听器，需要在数据变化时执行异步或开销较大的操作时使用
    watch:{
      // 如果 `message` 发生改变，这个函数就会运行
      message: function (newVal,oldVal){
        alert("new value:"+newVal + " ,old value:"+oldVal)
      }
    },
    // 每当触发重新渲染时，调用方法将总会再次执行函数。如果你不希望有缓存，请用方法来替代，但会造成大量性能开销
    methods: {
      reversedMessage2: function () {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

</body>
</html>

DOM渲染

指定被挂在元素(el)

el选项用于指定Vue实例的挂载目标，属性值仅限于CSS选择器或者DOM节点对象。当然也可以使用Vue实例的mount方法手动挂载。

视图的字符串模板(template)

Vue允许使用字符串作为实例的模板，模板字符串由template选项接收。

渲染函数(render)

render函数用于渲染视图，提供了回调方法createElement以供创建DOM节点。render创建的不是真实的DOM节点，而是虚拟节点（Virtual Node，VNode）。Vue通过VNode在页面中渲染出真实的DOM。

DOM渲染时，el、template和render三个选项的功能是一致的，都是获取实例模板。他们优先级是，render > template > el。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>DOM渲染</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app1">
  <p> el方式，使用css选择器：{{msg}}</p>
</div>
<div id="app2">
  <p>el方式，使用DOM节点：{{msg}}</p>
</div>
<div id="app3">
  <p>$mount方法，点击下方按钮手动挂载：{{msg}}</p>
</div>
<button onclick="handleMount()">手动挂载</button>
<div id="app4">template方式</div>
<div id="app5">render方式</div>

<script type="text/javascript">

  // 将创建的Vue应用挂载到一个选择器上（#app1）
  let vm1 = new Vue({
    el: '#app1',
    data() {
      return {
        msg: 'hello app1'
      }
    }
  })

  // 将创建的Vue应用挂载到一个DOM节点上
  let vm2 = new Vue({
    el: document.getElementById("app2"),
    data() {
      return {
        msg: 'hello app2'
      }
    }
  })

  // 不使用el挂载，点击按钮手动挂载
  let vm3 = new Vue({
    // el: document.getElementById("app3"),
    data() {
      return {
        msg: 'hello app3'
      }
    }
  })

  let handleMount= function () {
    vm3.$mount('#app3')
  }

  let vm4 = new Vue({
    el: '#app4',
    template:'<h1>template: {{msg}}</h1>', // 模板节点将替换原有DOM节点
    data() {
      return {
        msg: 'hello app4'
      }
    }
  })

  let vm5 = new Vue({
    el: '#app5',
    //使用render创建虚拟节点（Virtual Node，VNode）。虚拟节点组成的树形结构即“虚拟DOM”，VUe通过虚拟DOM在页面中渲染出真实的DOM
    render(createElement){
      /*createElement可接收3个参数。
      1、html标签字符串/组件选项对象/节点解析函数
      2、定义节点特性的对象
      3、子节点，可使用createElement构建*/
      return createElement('h1','render: ' + this.msg)
    },
    data() {
      return {
        msg: 'hello app5'
      }
    }
  })
</script>

</body>
</html>

封装复用

过滤器(filter)

用于在双括号插值中的JS表达式尾部添加管道符号”|”，表达式的值将作为参数传入filter。当有多个filter时从左向右执行。

自定义指令

Vue提供一些钩子函数，通过directives选项进行自定义。自定义指令提供了几个钩子函数：

1、bind，指令与元素绑定时调用
2、inserted，指令绑定的元素被挂载到父元素上时调用
3、update，指令所在VNode更新时调用
4、componentUpdated，指令所在VNode和子VNode全部更新后调用
5、unbind，指令与元素解绑时调用

钩子函数会被传入以下参数：

1、el，指令绑定元素，可用于操作DOM
2、binding，包含指令相关属性的对象。

binding包含以下属性：

1、name，指令名称
2、value，指令绑定的值
3、oldValue，指令值改变前的值
4、arg，传给指令的参数
5、modifiers，修饰符对象
6、vnode，虚拟节点
7、oldNode，虚拟节点更新前的值

组件的注册(components)

components用于为组件注册从外部引入的组件。

混入(mixins)

默认策略为，data优先采用组件的数据，钩子函数全部调用且先调用mixin的钩子函数，methods、components等优先采用组件的键值对，watch全部调用且优先mixin的watch方法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>封装复用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <p>{{title}}</p>
  <p>{{title | supplyFilter1}}</p>
  <p>{{title | supplyFilter1 | supplyFilter2}}</p>
  <p v-some.upper>{{ title }}</p>
  <p v-some.lower>{{ title }}</p>
  <p v-a="test">{{ title }}</p>
  <p v-b="test">{{ title }}</p>
  <button @click="change">点击改变a的值</button>
  <component1></component1>
  <component2></component2>
</div>

<script type="text/javascript">
  let mixin ={
    data(){
      return {
        test:'b'
      }
    },
    methods:{
      change(){
        this.test='c'
      }
    },
    mounted(){
      console.log('mixin mounted')
    }
  }
  
  // 全局注册过滤器
  Vue.filter('supplyFilter2',value=>{
    console.log('Supply Filter2')
    return value.replace(/%/g,' ')
  })

  // 全局注册自定义指令a
  Vue.directive('a',function (el,binding){
    let v = binding.value
    el.innerText = v
  })

  // 全局注册组件
  Vue.component('component1', {
    template:'<h1>自定义组件1</h1>'
  })

  let component2={
    name:'component2',
    template:'<h1>自定义组件2</h1>'
  }

  let vm = new Vue({
    el: '#app',
    mixins:[mixin],
    components:{ component2 },
    //data优先采用
    data() {
      return {
        title: 'Test#%For#%Filter',
        test:'a'
      }
    },
    //methods优先采用
    methods:{
      change(){
        this.test='d'
      }
    },
    //钩子函数全部采用，但先调用mixin的钩子函数
    mounted(){
      console.log('instance mounted')
    },
    //filters选项用于定义可用的过滤器，在插值中添加在js表达式的尾部，以管道符号'|'与表达式隔开
    filters:{
      supplyFilter1(value){
        console.log('Supply Filter1')
        return value.replace(/#/g,' ')
      }
    },

    directives:{
      //当bind和update函数相同时可直接简写
      some(el,binding){
        let text=el.innerText
        let modifiers=binding.modifiers //修饰符对象
        if (modifiers.upper){
          el.innerText=text.toUpperCase()
        }
        if (modifiers.lower){
          el.innerText=text.toLowerCase()
        }
      },
      b: {
        bind(el, binding){
          let v = binding.value
          el.innerText = v
        },
        update(el, binding){
          let v = binding.value
          el.innerText = v + ' updated'
        }
      }
    }
  })


</script>

</body>
</html>

内置组件

动态组件
插槽
组件缓存
过度效果

vue-cli

1
2
3

$ npm uninstall vue-cli -g
$ npm install -g @vue/cli
$ npm install -g vue-cli

$ vue init webpack NAME
$ vue create
$ vue ui 
$ npm run serve

Babel
TypeScript
PWA
Vue-router
Vuex
CSS预处理
eslint prettier
Unit测试
e2e测试

1	$ npm install sass-loader node-sass --save-dev

其他

v-model 只是语法糖，下面的两行代码是一致的

1 2	<input v-model="message"> <input v-bind:value="message" v-on:input="message = $event.target.value" />

es6函数
属性名 + 左小括号 + 参数列表(可为空) + 右小括号 + 左大括号 + 函数体 + 右大括号。

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data() {
            return {
                isLogin: false
            }
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data: function(){
            return {
                isLogin: false
            }
        }
    })
</script>

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            isLogin: false
        }
    })
</script>

Vue的render函数

<script>
    Vue.component('elem', {
        render: function(createElement) {
            return createElement('div');//一个HTML标签字符
        }
    });
    new Vue({
        el: '#app'
    });
</script>


new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

https://www.jianshu.com/p/7508d2a114d3 Vue render函数

https://www.jianshu.com/p/b12d0d3ad4c1 Vue事件修饰符（二）.prevent .passive