Vue.js安装与指令

1.vue.js简介

1.1什么是vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简
单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模
型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。
Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。
Vue.js 是一个用于创建 web 交互界面的库。
从技术角度讲， Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连
接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。

（1）ViewModel
一个同步 Model 和 View 的对象。在Vue.js 中，每个 Vue 实例都是一个 ViewModel。它们是通过构造函数
Vue 或其子类被创建出来的。
var vm = new Vue({ /* options */ })
（2）视图 (View)
被 Vue 实例管理的 DOM 节点。
vm.$el//TheViewVue.js使用基于DOM的模板。每个Vue实例都关联着一个相应的DOM元素。当（3）模型(Model)一个轻微改动过的原生JavaScript对象。vm.$data // The Model
Vue.js 中的模型就是普通的 JavaScript 对象——也可以称为数据对象

1.2 安装

（1）官网下载
（2）使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
（3）npm

$ npm install vue
`# 获取CSP兼容版本：
`$ npm install vue@csp
`# 获取最新开发版本(来自于GitHub):
$ npm install yyx990803/vue#dev`在这里插入代码片`

2.Vue.js 指令

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
插值
文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

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

v-html 指令， v-text指令
使用 v-html 指令用于输出 html 代码：

 <div id="app">
        <p v-html="msg2"></p>
        <p v-text="msg1"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: '消息',
                msg2: '<h1>消息2</h1>'
            }
    </script>

v-show
根据表达式之真假值，切换元素的 display CSS property。
当条件变化时该指令触发过渡效果。

 <h2 v-show="flag">{{msg3}}</h2>

v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。

<div id="app">
        <h3 v-if='flag'>这是v-if控制的元素</h3>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                flag:false
            },        
        })
    </script>

v-else
不需要表达式
限制：前一兄弟元素必须有 v-if 或 v-else-if。

<div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

v-else-if
前一兄弟元素必须有 v-if 或 v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
为当前遍历的元素提供别名：

<div v-for="num in10">
  {{num }}
</div>

遍历数组，对象

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in list" :key="item.id">
            {{ item }}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 5, 6]
            },
        })
    </script>

v-on
缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

绑定事件
<button @click="start"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

v-bind
缩写：:
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
修饰符：
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

数组语法

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

v-model
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

 <div id="app">
        <input type="text" name="" v-model="num1">
        <select name="" id="" v-model="md">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" v-model="num2">
        <input type="button" value="=" @click='start' />
        <input type="text" name="" v-model="num3">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num1: 0,
                num2: 0,
                num3: 0,
                md: '+'
            },
            methods: {
                start() {
                    console.log('111');
                    switch (this.md) {
                        case '+':
                            this.num3 = parseInt(this.num1) + parseInt(this.num2);
                            break;
                        case '-':
                            this.num3 = parseInt(this.num1) - parseInt(this.num2);
                            break;
                        case '*':
                            this.num3 = parseInt(this.num1) * parseInt(this.num2);
                            break;
                        case '/':
                            this.num3 = parseInt(this.num1) / parseInt(this.num2);
                            break;
                    }

                },
            }
        })
    </script>

v-slot
提供具名插槽或需要接收 prop 的插槽。

<infinite-scroll>
        <template v-slot:item="slotProps">
          <div class="item">
            {{ slotProps.item.text }}
          </div>
        </template>
    </infinite-scroll>

v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div v-cloak>
  {{ message }}
</div>

v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>