vue介绍文档https://cn.vuejs.org/v2/guide/
引入Vue
- 开发环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生产环境版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
v-text
<body>
<div id="app">
{{message}}
<h1>{{school.name}}</h1>
<ul>
<li>{{compus[0]}}</li>
<li>{{compus[1]}}</li>
</ul>
<h2 v-text="message+'深圳'"></h2>
<h2>{{message}}深圳</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好，Vue!",
school: {
name: "黑马",
mobile: "110"
},
compus: ["北京", "上海", "西安"]
}
})
</script>
</body>
</html>
v-html
v-html与v-text的不同之处：
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
//content: "Vue欢迎你"
content: "<a href='www.baidu.com'>百度一下</a>"
}
})
</script>
输出：
<a href='www.baidu.com'>百度一下</a>
百度一下
v-html可以解析标签
v-text无论内容是什么都会解析成文本
v-on
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
doIt: function() {
alert("vue欢迎你")
}
}
})
</script>
- v-on绑定的方法定义在methods属性中
- v-on方法内部通过this关键字可以访问定义在data中的数据
<div id="app">
<h2 @click="addFood">{{food}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "土豆"
},
methods: {
addFood: function() {
console.log(this.food);
this.food += "好好吃！"
}
}
})
</script>
计数器
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
this.num++;
},
sub: function() {
console.log('sub')
this.num--;
}
}
})
</script>
v-show
根据真假切换元素的显示状态
原理是修改元素的display实现显示隐藏
v-if操纵的是dom元素，v-show操纵的是样式（适用于频繁切换的）
<div id="app">
<input type="button" value="是否显示" @click="changeIsShow">
<button v-show="isShow">图片</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow;
console.log(isShow)
}
},
})
</script>
v-bind
v-bind用于为元素绑定属性，完整的写法是v-bind:属性名，可简写为:属性名
注意动态增删class时使用对象的形式更好
<style>
.active {
border: 1px solid red;
}
</style>
<body>
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'" alt="">
<br>
<img :src="imgSrc" :title="imgTitle" alt="" :class="isShow?'active':''" @click='changeIsShow'>
<!-- 简写 --三元表达式>
<!- title是鼠标悬浮效果 -->
<br>
<img :src="imgSrc" :title="imgTitle" alt="" :class="{active:isShow}" @click='changeIsShow'>
<!-- 非三元表达式，对象式写法 -->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "http://www.itheima.com/images/logo.png",
imgTitle: "黑马",
isShow: true
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
图片切换练习
<body>
<div id="app">
<input type="button" v-show="index!=0" value="上一个" @click="prev">
<img :src="imgArr[index]" alt="">
<input type="button" v-show="index<imgArr.length-1" value="下一个" @click="next">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgArr: [
"img01.jpg",
"img02.jpg",
"img03.jpg"
],
index: 0,
isShow: true
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow
},
prev: function() {
if (this.index-- > 0) {
this.index--;
} else {
alert("这是第一张")
this.index = 0;
}
},
next: function() {
if (this.index < 2) {
this.index++;
} else {
alert("这是最后一张")
this.index = 2;
}
}
}
})
</script>
</body>
