Vue

渐进式 JavaScript 框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

 

一、走进Vue

1、what -- 什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

2、why -- 为什么要学习Vue

三大主流框架之一：Angular React Vue先进的前端设计模式：MVVM可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

3、special -- 特点

单页面web应用数据驱动数据的双向绑定虚拟DOM

4、how -- 如何使用Vue

开发版本：vue.js

生产版本：vue.min.js

<div id="app"> {{ }}</div><script src="js/vue.min.js"></script><script> new Vue({ el: '#app' })</script>

 

二、Vue实例

1、el：实例

new Vue({    el: '#app'})// 实例与页面挂载点一一对应// 一个页面中可以出现多个实例对应多个挂载点// 实例只操作挂载点内部内容

2、data：数据

<div id='app'>   {{ msg }}</div><script>    var app = new Vue({   el: '#app',   data: {   msg: '数据',   }   })    console.log(app.$data.msg);    console.log(app.msg);</script><!-- data为插件表达式中的变量提供数据 --><!-- data中的数据可以通过Vue实例直接或间接访问-->

3、methods：方法

<style>    .box { background-color: orange }</style><div id='app'>    <p class="box" v-on:click="pClick">测试</p> <p class="box" v-on:mouseover="pOver">测试</p></div><script>    var app = new Vue({   el: '#app',   methods: {            pClick () {                // 点击测试           },            pOver () {                // 悬浮测试           }   }   })</script><!-- 了解v-on:为事件绑定的指令 --><!-- methods为事件提供实现体-->

4、computed：计算

<div id="app"> <input type="text" v-model="a">    <input type="text" v-model="b">    <div>       {{ c }}    </div></div>​<script> // 一个变量依赖于多个变量    new Vue({        el: "#app",        data: {            a: "",            b: "",       },        computed: {            c: function() {                // this代表该vue实例                return this.a + this.b;           }       }   })</script>

5、watch：监听

<div id="app"> <input type="text" v-model="ab">    <div>       {{ a }}       {{ b }}    </div></div>​<script> // 多个变量依赖于一个变量    new Vue({        el: "#app",        data: {            ab: "",            a: "",            b: "",       },        watch: {            ab: function() {                // 逻辑根据需求而定                this.a = this.ab[0];                this.b = this.ab[1];           }       }   })</script>

6、delimiters：分隔符

<div id='app'>   ${ msg }</div><script>    new Vue({   el: '#app',   data: {   msg: 'message'   },        delimiters: ['${', '}']   })</script>

 

三、生命周期钩子

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数

钩子函数: 满足特点条件被回调的方法

new Vue({    el: "#app",    data: {        msg: "message"   },    beforeCreate () {        console.log("实例刚刚创建");        console.log(this.msg                       },    created () {        console.log("实例创建成功, data, methods已拥有");        console.log(this.msg);   },    mounted () {        console.log("页面已被vue实例渲染, data, methods已更新");   }    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块})

 

四、Vue指令

1、文本相关指令

<div id="app">    <!-- 插值表达式 -->    <p>{{ msg }}</p>    <!-- eg:原文本会被msg替换 -->    <p v-text='msg'>原文本</p>    <!-- 可以解析带html标签的文本信息 -->    <p v-html='msg'></p>    <!-- v-once控制的标签只能被赋值一次 -->    <p v-once>{{ msg }}</p></div><script type="text/javascript"> // 指令: 出现在html标签中可以被vue解析处理的全局属性 new Vue({ el: "#app", data: { msg: "message" } })</script>

2、斗篷指令

<style type="text/css">   [v-cloak] { display: none; }</style><div id="app" v-cloak>   {{ msg }}</div><script src="js/vue.min.js"></script><script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" } })</script><!-- 避免页面闪烁-->

3、属性指令

<!-- 给自定义全局属性绑定变量 --><p v-bind:abc="abc"></p><!-- 以原字符串形式绑定全局属性 --><p v-bind:title="'abc'"></p>​<!-- 单类名绑定 --><p v-bind:class="c1"></p><!-- 多类名绑定 --><p v-bind:class="[c2, c3]"></p><!-- 类名状态绑定 --><p v-bind:class="{c4: true|false|var}"></p><!-- 多类名状态绑定 --><p v-bind:class="[{c5: true}, {c6: flase}]"></p>​<!-- 样式绑定 --><div :style="div_style"></div><div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div><script type="text/javascript"> new Vue({ el:"#app", data: {            abc: "abc",            c1: "p1",            c2: "p2",            c3: "p3", div_style: { width: "200px", height: "200px", backgroundColor: "cyan" } } })</script><!-- v-bind: 指令可以简写为 : -->

4、事件指令

<!-- v-on: 指令 简写 @ --><!-- 不传参事件绑定，但事件回调方法可以获取事件对象 --><p @click="fn"></p><!-- ()可以传入具体实参 --><p @click="fn()"></p><!-- ()情况下，事件对象应该显式传入 --><p @click="fn($event)"></p>

5、表单指令

<div id="app">    <!-- v-model针对于表单元素 -->    <form action="" method="get">        <!-- 1、双向绑定：服务于文本输入框 -->        <!-- v-model存储的值为输入框的value值 -->        <div>            <input type="text" name="usr" v-model="in_val">            <input type="password" name="ps" v-model="in_val" >            <textarea name="info" v-model="in_val"></textarea>        </div>​        <!-- 2、单选框 -->        <div>            <!-- 单选框是以name进行分组，同组中只能发生单选 -->            <!-- v-model存储的值为单选框的value值 -->           男：<input type="radio" name="sex" value="男" v-model="ra_val">           女：<input type="radio" name="sex" value="女" v-model="ra_val">           {{ ra_val }}        </div>​        <!-- 3、单一复选框 -->        <!-- v-model存储的值为true|false -->        <!-- 或者为自定义替换的值 -->        <div>            <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />           {{ sin_val }}        </div>​        <!-- 4、多复选框 -->        <!-- v-model存储的值为存储值多复选框value的数组 -->        <div>            <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />            <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />            <input type="checkbox" value="不挑" name="cless" v-model='more_val' />           {{ more_val }}        </div>    </form></div>​<script type="text/javascript"> new Vue({ el: '#app', data: { in_val: '', // 默认值可以决定单选框默认选项 ra_val: '男', // 默认值为true，单一复选框为选中，反之false为不选中 sin_val: '', // 数组中存在的值对应的复选框默认为选中状态

转载于:https://www.cnblogs.com/zhouze/p/11402584.html