这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
1.引入Vue
-
在官方文档中获取引入Vue的方式，网址：v2.cn.vuejs.org/v2/guide/
-
选择开发环境版本，复制代码到html页面中，完成引入。
2.Vue基础结构
-
在Vue的基础结构中，有两部分内容，一部分是页面显示中的内容。
- 在下述例子中，存在一个id为basic的div，而里面包含的内容为{{message}}。message为后续将会传入的变量，需要用{{}}（差值表达式）括起，否则作为普通文本内容“message”存在。
<body>
<div id="basic">
{{message}}
</div>
</body>
-
另一部分是JavaScript中的内容。
-
创建一个名为basic（名称可变）的Vue实例，并在Vue()中传入参数el、data和method。
-
el为挂载点，即Vue实例管理的元素，Vue实例只会作用在其范围内，可以使用id选择器、类选择器等。注意：若使用元素选择器，不建议选择
<html>和<body>这两个html元素。 -
data为数据对象，其内容为变量名和变量值，变量值可以是字符串类型、数值类型、数组类型、对象类型等。
-
method为响应操作的方法，当用户在页面中进行指定操作时触发，进行更改数据对象的值或在控制台中输出内容等。
-
例：
<script>
var basic = new Vue({
el: '#basic',
data:{
message: 'Hello Vue!'
},
method:{
}
})
</script>
运行效果：
完整代码：
3.Vue基础指令
- v-text
设置标签的文本内容。
<div id="basic">
<!-- 文本显示 -->
<h2 v-text="message+'!'"></h2>
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
message:"你好!"
}
})
<script>
运行效果：
- v-html
设置标签内文本并识别为HTML代码，相当于innerHTML功能。
<div id="basic">
<!-- 需要解析html结构，就用v-html -->
<p v-text="content"></p>
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
content:"<a href='https://juejin.cn/'>掘金</a>",
}
})
<script>
运行结果：
如果将v-html改为v-text，则运行结果为纯文本<a href='https://juejin.cn/'>掘金</a>。
- v-on
事件绑定，可以用@代替。
<div id="basic">
<input type="button" value="v-on" v-on:click="onclick">
<div>
<script>
var basic = new Vue({
el:"#basic",
methods: {
onclick:function(){
alert("click v-on");
},
}
})
<script>
运行结果为v-on按钮，点击后弹出click v-on消息。
改成双击触发，并且用@进行简写后，代码为：
<div id="basic">
双击+简写 <!-- 注意是dbl+click -->
<input type="button" value="v-on" @dblclick="onclick">
<div>
除了点击触发alert以外，也可以通过结合变量，实现改变页面显示内容的效果。
<div id="basic">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
num:1
}
methods: {
sub:function(){
//console.log("sub")
if(this.num > 0){
this.num--;
}
else{
alert("到底了，不能再减了！");
}
},
add:function(){
//console.log("add")
if(this.num < 10){
this.num++;
}
else{
alert("到顶了，不能再加了！");
}
}
}
})
<script>
运行结果：
每点击一次-按钮，数值-1，每点击一次+按钮，数值+1。当数值为1时点击-按钮，或当数值为10时点击+按钮，都会弹出消息提示已到极限，无法继续减小或增大。
- v-for
将所在标签及其内部内容，根据需要循环的元素个数，进行拷贝。
<div id="basic">
<h2 v-for="item in date">
{{item.name}}
</h2>
<input type="button" value="点击增加日期项" @click="add">
<input type="button" value="点击删除第一个日期项" @click="remove">
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
date:[
{name:"1月1号"},
{name:"1月2号"},
{name:"1月2号"}
],
}
methods: {
add:function(){
this.date.push({name: "1月n号"});
},
remove:function(){
//shift方法，移除第一个元素
this.date.shift();
}
}
})
<script>
运行结果：点击左侧按钮，在日期列表最下方增加一个“1月n号”项；点击右侧按钮，则删除最上方的一项。
- v-show
设置元素是否显示。其值为真，元素显示，其值为假，元素不显示。
<div id="basic">
<!-- 点击按钮，切换显示状态 -->
<button @click="changeIsShow">切换图片显示状态</button>
<img src="E:/picture/1.jpg" v-show="isShow" >
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
isShow:false
}
methods: {
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
})
<script>
运行结果为“切换图片显示状态”按钮，点击后isShow为true，图片出现，再次点击后isShow为false，图片消失。
- v-if
设置元素是否存在，与v-show类似，但v-show为隐藏元素，v-if为删除该元素。
<div id="basic">
<input type="button" value="切换p标签显示" @click="toggleIsShow">
<!-- v-if是否存在，适用于不常切换状态的元素 -->
<p v-if="pIsShow">p标签</p>
<!-- v-show是否显示，适用于频繁切换状态的元素 -->
<p v-show="pIsShow">p标签 - v-show</p>
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
pIsShow:false
}
methods: {
toggleIsShow:function(){
this.pIsShow = !this.pIsShow;
},
}
})
<script>
运行结果：在控制台中，pIsShow为false时，由v-if控制的p标签不存在，而v-show控制的p标签虽然不显示，却是存在的。
点击按钮后，两个p标签都显示，v-if控制的p标签也在控制台中出现。
- v-bind
设置元素属性，如：src（图片地址），title（鼠标移入会显示的内容），class（元素所属类）等。
<div id="basic">
<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle+'!!!'" v-bind:class="{active:isActive}" @click="toggleIsActive">
<div>
在使用时，v-bind可以省略，直接用:表示。
<div id="basic">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleIsActive">
<div>
*active为自定义的css样式，在当前例子中，由isActive控制是否采用该样式。
css样式：
<head>
<style>
.active{
border: 10px solid blue;
}
</style>
</head>
JavaScript：
<script>
var basic = new Vue({
el:"#basic",
data:{
imgSrc:"E:/picture/1.jpg",
imgTitle:"图片",
isActive:true
}
methods: {
toggleIsActive:function(){
this.isActive=!this.isActive;
},
}
})
<script>
运行结果为一张地址为imgSrc的图片，点击出现蓝色边框，再次点击消失，鼠标移入图片时显示“图片！！！”。
- v-model
获取和设置表单的值,且具有双向数据绑定，在表单上修改内容，或在通过操作改变表单所绑定的变量值时，另一方也会随之改变。
<div id="basic">
<input type="text" v-model="model_Message" @keyup.enter="getMessage">
<input type="button" value="修改内容" @click="setMessage">
<h2>{{model_Message}}</h2>
<div>
<script>
var basic = new Vue({
el:"#basic",
data:{
model_Message:"V-MODEL"
}
methods: {
getMessage:function(){
alert(this.model_Message);
},
setMessage:function(){
this.model_Message = "...";
}
}
})
<script>
运行结果：修改文本框内容时，下方显示内容随之改变，输入任意内容后按下回车键，即会弹出所输入的内容的消息。点击“修改内容”按钮，文本框及文本框下方内容都被更新为“...”，此时按下回车键，所弹出消息的内容也为“...”。
