vue基础指令示例
1、vue基础示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础指令</title>
<script src="../vu/js/vue.js"></script>
<style>
.box1{
width: 150px;
height: 150px;
background-color: red;
text-align: center;
line-height: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
text-align: center;
line-height: 200px;
}
.font{
font-size: 20px;
}
.back{
background-color: orange;
}
.color{
color: blue;
}
.clsIn{
background-color: red;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
}
.clsOut{
background-color: orange;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<!--插值语法示例-->
<div id="insertValue">
<p>插值语法</p>
<hr>
<p>{{str}}</p>
<p>这是一个数字插值: {{num}}</p>
<p>这是一个数组插值语法根据索引取值:{{arr[0]}}</p>
<p>这是一个对象插值:{{obj.c}}</p>
</div>
<!--v-html和v-text示例-->
<div id="htmlText">
<hr>
<p>文本指令</p>
<hr>
<!--将v-html:htmlText功能里面的data html变量里面的input渲染成html标签语法-->
<h3>v-html指令</h3>
<p v-html="html"></p>
<h3>v-text指令</h3>
<!-- v-text渲染成字符串， 如果p标签里面有内容v-text会把<p>测试</p>内容替换-->
<p v-text="content">这是老而v-text</p>
<hr>
<h3>v-show和v-if指令</h3>
<!-- v-show:如果是false 对内容或设置的样式不进行显示，但是标签存在，会将标签样式设置为display: none -->
<!-- v-if:如果是false 对内容或设置的样式不进行显示，但是标签不存在(注：删除和添加标签，效率低) -->
<div class="box1" v-show="b1">v-show-class-box1</div>
<p>v-if指令</p>
<div class="box2" v-if="b2">v-show-class-box2</div>
</div>
<!--点击事件on-click(注：@click)和v-bind示例-->
<div id="onBind">
<hr>
<h3>这个是v-on:</h3>
<button v-on:click="handledClick">点击显示alert</button>
<!--v-on:click="handledClick" 可以写 @click="handledClick"-->
<button @click="handledClick">点击</button>
<hr>
<h3>v-bind</h3>
<img v-bind:src="url" alt="">
<hr>
<h3>结合点击事件click和bind图片进行切换</h3>
<img v-bind:src="url" alt="" @click="imgClick">
</div>
<hr>
<h3>style和class指令绑定css样式示例</h3>
<div id="styleClass">
<hr>
<div>
<h3>:class指定绑定css样式</h3>
<p :class="fontSize">字符绑定class指令 css类class字体大小</p>
<p :class="arrClass">数组绑定class指令，css类class 字体大小，字体颜色，背景色</p>
<p :class="objClass">对象绑定class指令，css类class 字体大小，字体颜色</p>
</div>
<hr>
<div>
<h3>:style指定绑定style属性css样式</h3>
<p :style="styleStr">字符串绑定style指定实现style属性css样式字体大小，字体颜色</p>
<p :style="styleList">数组绑定style指令实现style属性css样式字体颜色，背景色</p>
<p :style="styleObj">数组绑定style指令实现style属性css样式字体颜色，字体大小，背景色</p>
</div>
</div>
<hr>
<h3>v-if条件渲染和v-for循环渲染</h3>
<div id="forIf">
<div>
<h5>条件判断显示正确而数据渲染</h5>
<!--v-if:代码开始的if判断, 代表的else if或elif判断 v-else：else判断-->
<!--根据条件判断正确的显示-->
<p v-if="score >= 90">优秀</p>
<p v-else-if="score > 70 && score < 90">良好</p>
<p v-else-if="score > 60 && score < 70">及格</p>
<p v-else>差</p>
</div>
<h5>v-for循显示数据</h5>
<div>
<p>循环列表显示数据</p>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<p>循环列表数据值和索引号</p>
<ul>
<!--item代表获取数据值 index代表的索引,索引从0开始（注: 位置不能换，第一个只能是值，第二个索引-->
<li v-for="(item, index) in list">{{index}}: {{item}}</li>
</ul>
<p>循环对象获取key和值</p>
<ul>
<!-- v-for循环对象value:代表获取对象的值,key:代表获取对象的key-->
<li v-for="(value, key) in obj">{{key}}: {{value}}</li>
</ul>
<ul>
<!--v-for循环对象单独变量获取对象是值-->
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
</div>
<hr>
<h3>v-model双向绑定示例</h3>
<div id="model">
<!--
v-model：数据会根据变化而变化
v-model.lazy: input框内输入完后鼠标移除input框后内容才会显示
v-model.number：input框内开头是数字后面输入字母或字符，字母或字符不会取值。如果开头是字母会正常显示
v-model.trim：去除两侧空白
-->
<h5>v-model随着数据变化而变化</h5>
<p><input type="text" v-model="bind">{{bind}}</p>
<h5>v-model.lazy离开input框数据发生变化</h5>
<p><input type="text" v-model.lazy="bindLazy">{{bindLazy}}</p>
<h5>v-model.number input框中开头输入数字后面数据内容不会取值显示，如果开头字母或字符正常取值显示</h5>
<p><input type="text" v-model.number="bindNumber">{{bindNumber}}</p>
<h5>v-model.trim 去除input框输入内容两侧空白</h5>
<p><input type="text" v-model.trim="bindTrim">{{bindTrim}}</p>
</div>
<hr>
<h3>blur change input事件示例</h3>
<div id="blurChangeInput">
<p><input type="text" v-model="blur" @blur="blurClick"></p>
<p><input type="text" v-model="change" @change="changeClick"></p>
<p><input type="text" v-model="input" @input="inputClick"></p>
</div>
<hr>
<h3>动态背景颜色切换</h3>
<div id="mousemove">
<!--mousemove鼠标移近发生变化，mouseout鼠标移除发生变化-->
<div :class="cls" @mousemove="seMove" @mouseout="seOut">OK</div>
</div>
<hr>
<div id="clickModify">
<h1>点击子标签，父标签的事件也触发，事件冒泡</h1>
<ul @click="handledUl">
<!--@click.stop:只处理自己的事件,不再冒泡到父标签 -->
<li @click.stop="handledLi">第一次点击</li>
<li>点击触发父标签冒泡</li>
</ul>
<h1>子标签的冒泡不处理：父标签写self, 父标签只处理自己的事件，冒泡的事件不管</h1>
<!--@click.self：只处理自己的事件，子控件冒泡的事件不处理-->
<ul @click.self="handledUl">
<li @click.stop="handledLi">第一次点击</li>
<li>第二次点击</li>
</ul>
<h1>阻止a标签的跳转</h1>
<!--@click.prevent:阻止a标签的跳转-->
<a href="https://www.baidu.com" @click.prevent="handledA">点击跳转到百度</a>
<h1>只能点击1次</h1>
<!--@click.once:只能点击1次，如果需要多次点击需要刷新才可以点击-->
<button @click.once="handledBut">点击获取</button>
</div>
</body>
<script>
var insertValue = new Vue({
el: "#insertValue", // /根据id找到div，这个div就是被vue托管
data: {
str: "这是一个插值字符串",
num: 10,
arr: ['A', 'B', 'C'],
obj: {c: 100, d: 200},
}
})
var htmlText = new Vue({
el: "#htmlText",
data: {
html: '<input type="text">',
content: '新的v-text指令',
b1: false,
b2: true,
}
})
var onBind = new Vue({
el: "#onBind",
data:{
url: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
url_list: [
"http://gips0.baidu.com/it/u=2298867753,3464105574&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
"http://gips1.baidu.com/it/u=1410005327,4082018016&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
"http://gips2.baidu.com/it/u=1192674964,3939660937&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
]
},
methods:{
handledClick(){
alert("这个是点击显示alert内容")
},
imgClick(){
this.url=this.url_list[Math.floor(Math.random()*3)]
}
}
})
var styleClass = new Vue({
el: '#styleClass',
data: {
// 1-1 class指令绑定css样式
// 字符串方式
fontSize: '',
// 推荐使用数据组进行css class类样式设置
arrClass: ['font', 'color', 'back'],
// 对象方式绑定class类样式。注：font, color, back代表css样式类，true代表使用此类，false代表不使用
objClass: {
font: true,
color: true,
back: false,
},
// style指定字符串模式绑定style属性实现css样式
styleStr: "font-size: 30px; color: red",
// 数组方式
styleList: [{color: "green"}, {backgroundColor: "red"}],
// 对象方式, 推荐使用对象方式进行style样式设置
styleObj: {
color: "red",
backgroundColor: "green",
fontSize: "35px",
}
}
})
var forIf = new Vue({
el: "#forIf",
data: {
score: 65,
list: ['A', 'B', 'C', 'D'],
obj: {
beijing: "北京",
shanghai: "上海",
shenzhen: "深圳",
}
}
})
var model = new Vue({
el: "#model",
data: {
bind: "",
bindLazy: "",
bindNumber: "",
bindTrim: "",
}
})
var blurChangeInput = new Vue({
el: "#blurChangeInput",
data: {
blur: "鼠标移开失去焦点事件",
change: "数据发生变化触发事件",
input: "输入内容触发事件",
},
methods: {
blurClick(){
console.log(this.blur)
},
changeClick(){
console.log(this.change)
},
inputClick(){
console.log(this.input)
}
}
})
var mousemove = new Vue({
el: "#mousemove",
data: {
// 绑定css 样式类，将样式类分别设置为true,false
cls: {clsIn: true, clsOut: false}
},
methods: {
seMove(){
// 鼠标移进将
this.cls.clsIn=false
this.cls.clsOut = true
},
seOut(){
this.cls.clsIn=true
this.cls.clsOut = false
}
}
})
var clickModify = new Vue({
el: "#clickModify",
data: {},
methods:{
handledLi(){
console.log("li被点击")
},
handledUl(){
console.log("触发ul父标签冒泡")
},
handledA(){
console.log("禁止访问")
},
handledBut(){
alert("只能被点击一次，在点击需要刷新")
}
}
})
</script>
</html>
