Vue--部分基本指令，v-bind,v-on,事件修饰符、v-model双向绑定、绑定类与style、v-for、v-if和v-show的使用和特点
1. 示例模板,实例化一个Vue对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--导入vue的CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="app1"> {{ msg }}</div>
</body>
<script>
// 创建一个Vue实例
// 导入包之后，浏览器内存中多了一个Vue构造函数
var vm1 =new Vue({
el: "#app1",
data: {
msg: 'Hello word'
}
})
</script>
</html>
以下示例都用这种格式演示
<body>
</body>
<script>
</script>
<style>
</style>
2. v-clock、v-text、v-html、v-bind绑定属性、v-on绑定事件
<body>
<div id="app2">
<!-- clock属性 能够解决 插值表达式闪烁的问题，当vue在之后引入
网速特别慢的情况下页面显示为 {{ 对应数据 }}
在加载的时候使用 v-clock 的样式 加载完毕就不显示该样式了-->
<p v-clock> xx {{ msg }} xx </p>
<!-- v-text默认没有闪烁问题，
v-text 会覆盖标签里面的text-->
<h4 v-text="msg"> 我是要被替换的内容 </h4>
<!-- v-text不能被渲染成html -->
<div> {{ msg2 }}</div>
<!-- 插入html -->
<div v-html="msg2"></div>
<!-- v-bind 绑定属性的指令,就是让属性与某个变量或表达式活计算属性
绑定下面的mytitle是变量，可以当做变量使用v-bind相当于表达式，-->
<input type="button" value="按钮" v-bind:title="mytitle + '456'">
<!--v-bind简写形式 v-bind: :-->
<input type="button" value="简写" :title="createTitle">
<!-- v-on: 事件绑定机制 简写形式 @ -->
<br>
<input type="button" value="v-on" v-on:click="show">
<input type="button" value="v-on" @mouseover="show">
<br>
</div>
</body>
<script>
var vm2 =new Vue({
el: "#app2",
data: {
msg: '123',
msg2: '<h1> H1 </h1>',
mytitle: '添加'
},
computed: {
createTitle() {
return '计算属性'
}
},
methods: {
show() {
alert("v-on")
}
}
})
</script>
<style>
/* 属性选择器 只要使用了v-clock属性，则样式如下*/
[v-clock]{
display: none;
}
</style>
案例：跑马灯效果
<body>
<div id="paomadeng">
<input type="button" value="浪起来" @click="runMsg">
<input type="button" value="低调" @click="stopMsg">
<h4> {{ msg }}</h4>
</div>
</body>
<script>
// 在vue实例中调用data，方法，要用this
var vm3 = new Vue({
el: '#paomadeng',
data: {
msg: '猥琐发育，别浪~~！',
intervalId: null,
},
methods: {
runMsg() {
// var _this = this
// setInterval(function () {
// // 注意，由于this的指向问题，这里的this
// // 指向了定时器，和外部的this不一致。
// // 会报错可以添加一个临时变量,
// // 但是这个是投机取巧，可以用es6的语法解决
// let start = _this.msg.substring(0, 1)
// let end = _this.msg.substring(1)
// _this.msg = end + start
// }, 400)
if (!this.intervalId){
this.intervalId = setInterval( () => {
// substring分割字符串，从0开始，只分割一个
let start = this.msg.substring(0, 1)
// 从1开始，分割后面所有的
let end = this.msg.substring(1)
this.msg = end + start
}, 400)
}
},
stopMsg() {
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
<style>
</style>
3. 事件修饰符
<body>
<div id="modify">
<!-- 1 .stop阻止事件冒泡 -->
<div @click="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="点击我" @click.stop="bthHandler">
</div>
<!-- 2 .prevent阻止默认事件-->
<a href="http://www.baidu.com" @click.prevent="">百度</a>
<!-- 3 .capture 事件捕获阶段发生的事件，与冒泡阶段顺序相反 -->
<div @click.capture="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="点击我" @click.stop="bthHandler">
</div><br>
<div @click.capture.stop="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="点击我" @click.stop="bthHandler">
</div><br>
<!-- 4 .self 只当事件在该元素本身(不是子元素)触发时回调 -->
<div @click.self="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="点击我" @click="bthHandler">
</div><br>
<!-- 5 .once 事件只触发一次 -->
<a @click.prevent.once="" href="http://www.baidu.com" target="view_window">第一次点我不跳转</a>
<!-- .stop 与.self的区别
.self 当得到子元素的冒泡事件时，自己忽略这个冒泡不执行，直接冒泡给上级。
并不会阻止冒泡事件的传递，当然也不会阻止本身的冒泡事件。
.stop 阻止所有的冒泡事件，自己执行了就不向上冒泡了-->
<div @click="clickOuter" class="outer" style="width: 200px;height: 200px;background-color: darkcyan;overflow: hidden ">
<div @click.self="clickMiddle" class="middle" style="width: 100px;height: 100px;background-color: darkgreen;margin:50px auto;overflow: hidden">
<div @click="clickInner" class="inner" style="width: 50px;height: 50px;background-color: darkseagreen;margin:25px auto;overflow: hidden"></div>
</div>
</div><br>
<div @click="clickOuter" class="outer" style="width: 200px;height: 200px;background-color: darkcyan;overflow: hidden">
<div @click.stop="clickMiddle" class="middle" style="width: 100px;height: 100px;background-color: darkgreen;margin: 50px auto;overflow: hidden">
<div @click="clickInner" class="inner" style="width: 50px;height: 50px;background-color: darkseagreen;margin: 25px auto"></div>
</div>
</div>
</div>
</body>
<script>
var modify = new Vue({
el: '#modify',
data: {
},
methods: {
divHandler() {
alert("inner")
},
bthHandler() {
alert("inner > button")
},
clickOuter() {
alert("outer")
},
clickMiddle() {
alert("middle")
},
clickInner() {
alert("inner")
},
}
})
</script>
<style>
</style>
4. v-model数据的双向绑定
Vue中，只有v-model能够实现数据的双向绑定，其他的都是从数据源到Html的单向绑定
<body>
<div id="model">
<h4>{{msg}}</h4>
<!-- 先试试 v-bind 实现数据的单行的绑定 M绑定到V中-->
单向绑定<input type="text" :value="msg" style="width: 40%"> <br>
双向绑定<input type="text" v-model="msg" style="width: 40%">
</div>
</body>
<script>
// v-model 实现表单数据的双向绑定，v-model只能用在表单中
// 表单元素：input(radio, text, address, email......) select checkbox textarea
// 只有v-model可以实现双向绑定 v-on 只能实现单向的数据传递
var model = new Vue({
el: '#model',
data: {
msg: '@@@@@@@@@@@@@@@@@@@@',
}
})
</script>
<style>
</style>
5. 为class绑定类样式的四种方法
<body>
<div id="classO">
<!-- 1. 传递一个数组，这里的class需要用v-bind绑定-->
<div :class="['red', 'thin', 'italic', 'active']">1这是一个很大的H1标签，大到你无法想象</div>
<!-- 2. 三元表达式，不加单引号的渲染成一个变量 -->
<div :class="['red', 'thin', 'italic', flag?'active':'']">2这是一个很大的H1标签，大到你无法想象</div>
<!-- 3. 在数组中使用对象的形式，提高可读性 -->
<div :class="['red', 'thin', 'italic', {'active':true}]">3这是一个很大的H1标签，大到你无法想象</div>
<!-- 4. 直接使用对象 ,使用v-bind绑定对象的时候，对象的属性名是，类名，对象的属性可以带引号，也可以不带引号-->
<div :class="{'red':true, thin:'true',italic:true ,active:false}">4这是一个很大的H1标签，大到你无法想象</div>
<div :class="classObj">5这是一个很大的H1标签，大到你无法想象</div>
</div>
</body>
<script>
new Vue({
el: '#classO',
data: {
flag: false,
classObj:{red:true, thin:true,italic:true ,active:false}
}
})
</script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style:italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
6. 绑定内联样式
<body>
<div id="styleO">
<!-- 1.直接在元素上通过v-bind绑定-->
<!-- 这里对象就是无序键值对的集合, -->
<h1 :style="{color:'red', 'font-weight':200}">1,这是一个H1</h1>
<!-- 2.将样式对象，定义到data中，直接引用到:style中-->
<h1 :style="flag">2,这是一个H1</h1>
<!-- 3.在：style中通过数组，引用多个data上的样式对象-->
<h1 :style="[styleObj1,styleObj2]">3,这是一个H1</h1>
</div>
</body>
<script>
new Vue({
el: '#styleO',
data: {
flag: {color:'red', 'font-weight':200},
styleObj1: {color:'red', 'font-weight':200},
styleObj2: {'font-style':'italic', letterSpacing:'0.5rem'}
}
})
</script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style:italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
7. v-for指令使用的四种方式
v-for
<body>
<div id="vfor">
<!-- v-for循环普通数组
v-for和key属性 -->
<ul>
<!-- 获取索引值的方式i-->
<li v-for="(item, i) in list">{{ i }}:{{ item }} </li>
</ul>
<ul>
<!-- 获取多个对象-->
<li v-for="(user,i) in dic">{{i}}、姓名：{{user.name}} 年龄：{{user.age}}</li>
</ul>
<!-- v-for循环对象,遍历对象身上的键值对的时候，除了有val,key,还有第三个参数 索引-->
<ul>
<li v-for="(val,key,index) in user">{{index}}: {{key}} {{val}}</li>
</ul>
<!-- v-for迭代数字-->
<ul>
<!-- in 后面我们放过 普通数组，对象，还可以放数字！-->
<!-- 通过循环数字进行循环遍历，如果使用v-for迭代数字，前面的count从 1 开始-->
<li v-for="count in 10">这是第 {{count}}次循环</li>
</ul>
<!-- v-for循环中key属性的使用 -->
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<!-- key绑定多选框绑定的值，key 在使用是时候必须使用v-bind属性绑定的形式，指定key的值
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时
，指定唯一的字符串/数字类型 :key 值-->
<div v-for="(item,i) in lis" :key="item.id">
<input type="checkbox">{{i}}:{{item.id}} {{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el: '#vfor',
data: {
list: [1,2,3,4,5],
dic:[{
name:'赵',
age:23,
},{
name:'钱',
age:24,
},{
name:'孙',
age:25,
},{
name:'李',
age:26,
}],
user:{
name:'屎大颗',
workingName:'ire men'
},
lis: [
{id:1, name:'李斯'},
{id:2, name:'嬴政'},
{id:3, name:'赵高'},
{id:4, name:'韩飞'},
{id:4, name:'荀子'},
],
name: '',
id: '',
},
methods: {
add(){
// push向列表末尾中增加数据 unshift向列表头中增加数据
// this.lis.push({id:this.id,name:this.name})
this.lis.unshift({id:this.id,name:this.name})
}
}
})
</script>
<style>
</style>
7. v-if和v-show的使用和特点：
<body>
<div id="ifshow">
<input type="button" @click="flag = !flag">
<!-- v-if原理是删除和增加dom元素。较高的切换性能消耗-->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<!-- v-show的原理是增加display:none属性，有较高的初始渲染消耗-->
<h3 v-show="flag">这是用v-if控制的元素</h3>
<!--如果元素涉及到频繁的切换消耗，用v-show,如果显示切换频率特别小，用v-if-->
</div>
</body>
<script>
</script>
<style>
new Vue({
el:"#ifshow",
data:{
flag:true
},
methods:{
taggle() {
this.flag = ! this.flag
}
}
})
</style>
