Vue基础指令
CDN使用VUE
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
NPM安装
在用 Vue 构建大型应用时推荐使用 NPM 安装。
# 最新稳定版
npm install vue
创建vue实例
// 初始化vue
new Vue({
el: "#app",//接受一个dom节点，或者id,应用的根节点将实例挂载到元素上，内部的所有结构都具备是有vueapi的能力
data: {//提供应用所有的数据
title: "hello Vue",
num: 1
},
methods: {//应用的方法
handleClidk() {
this.num++
}
}
})
VUE基础指令及作用(常用)
v-on
绑定事件，使用v-on命令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
简写是@，v-on:click='方法的名字'简写@click='方法的名字'
<div id="app">
{{num}}
<button @click="handleClidk()">增加数字</button>
</div>
new Vue({
el: "#app",//接受一个dom节点，或者id,应用的根节点将实例挂载到元素上，内部的所有结构都具备是有vueapi的能力
data: {//提供应用所有的数据
title: "hello Vue",
num: 1
},
methods: {//应用的方法
handleClidk() {
this.num++
}
}
})
v-html
v-html 简写`` 绑定data中的值到标签的innerHTML中，下面rawHtml元素则按照HTML语言编写
<div id="app">
<p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el :"#app",
data : {
msg:"hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',
color:'red',
number: 10,
ok : false,
message:"vuesdads"
}
});
vm.msg = "hi...."
</script>
//输出 this is should be red(红色字体)
v-text
v-text 基本上跟v-html 一样 ，但是他会把标签字符串原样输出
<body>
<div id="app">
<h1>{{tit}}</h1>
<h2 v-html="tit"></h2>
<ul v-html="listStr"></ul>
<ul v-text="listStr"></ul>
</div>
</body>
<script src="./vue.js"></script>
<script>
let options = {
el: "#app",
data: {
tit: 'hello world',
listStr: "<li>list</li>"
}
}
let app = new Vue(options)
</script>
v-if
v-if根据其值（
boolean）控制载体的加载与卸载，v-else配合v-if，以及v-else-if和 javascript 的行为逻辑判断一致。
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=60">及格</p>
<p v-else-if="score<60">不及格</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 13,
}
})
</script>
上面代码score改变值的画则会影响输出。
v-show
v-show和v-if机制一样，但是v-show是通过style的属性 display：none 的方式来控制元素显示与隐藏。
v-show 隐藏 是display:'none'*
v-if 隐藏是 visibility:hidden;*
区别是
*display:none和visibility:hidden的区别是：*
*1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；*
<div id='itany'>
<p>{{msg}}</p>
<h1 v-if="!see" >{{msg}}</h1>
<h1 v-show="!see" v-bind:class="color">{{msg}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
new Vue({
el: '#itany',
data: {
msg: 'hello vue',
see: true,
color:'red',
}
})
</script>
<style>
.red{
color: red;
}
</style>
v-bind
v-bind 把标签的属性（attribute）跟data中的数据进行绑定，简写 :（英文冒号）,例如：
<div id="app">
<div v-bind:class="color">test...</div>
</div>
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',
color:'blue',
number : 10,
ok : 1,
}
});
v-for
循环结构，循环的是他的载体以及所有后代，v-for与v-bind:key结合使用
循环数组
<ul id="app">
<li v-for="(item,i) in userList">索引：{{i}}---ID：{{item.id}}---姓名：{{item.name}}---年龄：{{item.age}}</li>
</ul>
<script type="text/javascript">
var vm = new Vue({
el :"#app",
data: {
userList: [
{id: 1,name: "zs1",age: 21},
{id: 2,name: "zs2",age: 22},
{id: 3,name: "zs3",age: 23},
{id: 4,name: "zs4",age: 24},
{id: 5,name: "zs5",age: 25}
]
}
})
</script>
输出：
循环对象
<div id="app">
<div v-for="(value,name,index) in object">
{{index}}.{{name}}. {{value}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
输出:
v-model
一般用于input标签 双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
输出：输入框内容变更是上面
标签内容同时变更。
v-model的语法糖
v-on：input
v-bind：value
v-model的修饰符拓展
v-model.lazy 惰性更新
v-model.number 字符串数字转，从string换为number
v-model.trim 去除前后空格
基础指令拓展
v-if和v-show的区别
v-show和v-if机制一样，但是v-show是通过display：none的方式来控制元素显示与隐藏
优先级v-for>v-if
v-if和v-for可以一起使用，但是不推荐。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，会造成性能浪费。
解决办法：
- 使用计算属性
- 可以将
v-if置于外层元素 (或<template>) 上