vue查询学习笔记

一、基础特性

1.1、实例及选项

通过创造一个实例：var vm = new Vue({})

1.1.1 模板

el:类型为字符串，DOM元素或函数。为实例提供挂载元素。
template:类型为字符串。默认将template值替换为挂载元素，且合并挂载元素和模板根节点的属性。
兄弟节点为根节点时需要一根节点将其包起。

<div id="app">
  <p>123</p>
</div>
<script id="tp1" type="x-template">
  <div class="tp1">
    <p>This is a tpl from script tag</p>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
   
      el: "#app",
      template: "#tp1"
    });
  </script>
</script>

1.1.2 数据

data: {
return{…}
}
不使用return包裹的数据会在项目的全局可见，会造成变量污染,使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
可通过引用Vue实例中的vm中的$data来获取生命的数据。

1.1.3 方法

methods :{}

1.2 生命周期

（来源：http://blog.csdn.net/mqingo/article/details/86031260）

1.3 数据绑定

1.3.1 文本插值

1. Mustache语法{ {}}
   将元素当成纯文本输出
2. 过滤器(vue2.0后内置过滤器已删除，需自己写)
   格式：{ { name | filterA arg1 arg2}}
3. 指令
   例：<button v-on:click.stop="doClick"></button>

插值操作

内置指令

v-if与v-for的优先级：v-for与v-if一起使用时，v-for优先。

v-once

dom元素只会渲染一次。

v-html

将元素当成HTML标签解析后输出

v-text

将元素当成纯文本输出，覆盖元素中原来的内容

v-pre

跳过这个元素和它的子元素的编译过程(直接输出“{ {message}}”字符串)

v-cloak

先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，只替换{ { msg }}占位符里面的内容；(解决加载延迟，数据刷新不及时{ {message}}到变量值的闪动问题)
类似div开始有一个css属性display:none，加载完成之后，css属性display:clock，变成元素显示出来。

动态绑定属性 v-bind

用法 v-bind：属性名=“”
简写为 :属性名=“”
例：<a v-bind:class="{active:isActive}">change</a>

二、webpack

2.1 安装

2.1.1安装：

npm install --save -dev webpack

全局安装vue、vue-cli:

npm install vue vue-cli -g

2.1.2 运行vue

创建一个基于webpack模板项目：

vue init webpack my-project

运行：

cd my-project
cnpm install
npm run dev

2.1.3打包

npm run build

三、组件化

3.1创建组件构造器对象

// 1.创建组件构造器对象
    const cpnc = Vue.extend({
   
      template:`
        /*......*/`
    })

3.2 组件注册

3.2.1 全局注册

Vue.component('my-component-name', {
   
  // ... 选项 ...
})

3.2.2 局部注册

var ComponentA = {
    /* ... */ }
var ComponentB = {
    /* ... */ }

new Vue({
   
  el: '#app',
  components: {
   
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

3.2.3 组测组件的语法糖

注册组件时候可以不实例化组件对象，直接在注册的时候实例化。

  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    // 1.注册全局组件语法糖
    Vue.component('cpn1', {
   
      template:`
        <div>
          <h2>全局组件语法糖</h2>
          <p>全局组件语法糖</p>
        </div>`
    })

    const app = new Vue