Vue基础

一、Vue介绍：

• Vue是一个js渐进式框架，只注重视图层；
• 渐进式：主张最少，没有多做职责之外的事；
• MVVM开发模式的实现者：（model，view，viewmodel）

　　　　viewmodel：连接视图和数据的中间件，实现双向数据绑定；

二、Vue.js引入：

　　1）本地包；

　　2）CDN：内容分发网络；//从离自己最近的服务器上快速获取外部资源；

　　　　bootcdn：<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

三、Vue对象：

　　1）el：绑定vue对象到指定div；

　　2）data：提供数据，存放键值对；

　　3）methods：存放函数；

　　4）computed：计算属性：

• • 计算结果存入缓存，重复调用不会重新执行函数；
  • 调用时无需小括号；//调用方法需要小括号；
  • methods和computed不能重名；

　　5）watch：监控data中的属性变化；

四、基本语法：

　　1、插值：

　　　　1）文本：<p>{{ message }}</p>

　　　　2）v-once不能修改：<p v-once>{{ message }}</p>

　　　　3）HTML：<div v-html="message"></div>

　　　　4）纯文本：<p v-html="message"></p>

　　2、表达式：

　　　　1）数组：{{[0,1,2,3,4][1]}}

　　　　2）对象：{{ {name:‘xiaoming‘,age:20}.name }}

　　　　3）运算符：{{5+5}}

　　　　4）三目运算符：{{ ok ? ‘YES‘ : ‘NO‘ }}

　　5）函数：{{ message.split(‘‘).reverse().join(‘‘) }}

　　3、双向数据绑定：

　　　　<input v-model="message">

　　4、属性：v-bind；

　　　　1）class：<div v-bind:class="{‘class1‘: use}">v-bind:class 指令</div>

　　　　2）id：<div v-bind:id="‘list-‘ + id"></div>

　　　　3）href：<a v-bind:href="url"></a>

　　　　缩写：<a :href="url"></a>

　　5、事件：v-on；

　　　　<input type="text" v-on:click="function()">

　　　　//函数名后的()小括号可以省略；

　　　　缩写：<input type="text" @input="function()">

　　　　1）this：当前Vue对象；

　　　　2）event：当前事件对象；

　　　　3）参数：v-on:click="increase(2)"；多参数：v-on:click="increase(2,event)"；

　　　　4）停止事件：event.stopPropagation();

　　　　　　//修饰符方式：<span v-on:mousemove.stop>停止鼠标事件</span>

　　6、修饰符：

　　　　1.事件修饰符：

　　　　　　1）stop阻止事件传播：<a v-on:click.stop></a>

　　　　2.按键修饰符：

　　　　　　1）enter回车：<input v-on:keyup.enter="submit">

　　　　　　2）tab制表符；

　　　　　　3）delete删除/退格；

　　　　　　4）esc；

　　　　　　5）space空格；

　　　　　　6）up/down/left/right方向键；

　　　　3.系统修饰键：

　　　　　　1）ctrl；2）alt；3）shift

　　　　　　4）meta徽标：<input @keyup.meta.67="method">；//win+c键触发；

　　　　4.鼠标修饰键：

　　　　　　1）left

　　　　　　2）right

　　　　　　3）middle

　　7、指令：

　　　　1.条件语句：

　　　　　　1）v-if：<p v-if="boolean"></p>

　　　　　　2）v-else：<p v-else="boolean"></p>

　　　　　　3）v-else-if：<div v-else-if="boolean">

　　　　　　4）v-show: <p v-show="boolean"></p>

　　　　　　//如果元素有display为none，设置v-show为true无法起作用；

　　　　　　v-if/v-show区别：

　　　　　　（1）v-if：删除元素；v-show添加display属性为none,隐藏的效果；

　　　　　　（2）v-show：性能更好，只是css切换；

　　　　2.循环语句：

　　　　　　<p v-for=""></p>

　　8、过滤器：

　　　　1）在插值表达式中：{{ message | capitalize }}

　　　　2）在v-bind指令中：<div v-bind:id="rawId | formatId"></div>

　　　　//过滤器可以串联：{{ message | filterA | filterB }}

Vue基础

原文：https://www.cnblogs.com/Tractors/p/11079160.html