记录：260
体验指令:
v-text，v-html，v-show，v-cloak，v-once，v-pre,v-model，v-on，v-bind，v-if，v-else，v-else-if，v-for
本例环境：jQuery：3.6.0; Vue：2.6.0
一、名词
HTML：超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。
CSS：层叠样式表(Cascading Style Sheets)是一种用于表现HTML等文件样式的语言。
JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言；是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
jQuery：一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
Vue：一套用于构建用户界面的渐进式框架。
二、Vue体验
本例以vue_demo项目为例，记录体验步骤。
1.初始化vue_demo
1.1.新建vue_demo
在vue_demo中新建如下目录：
vue_demo\css：存放css样式文件；
vue_demo\images：存放图片文件；
vue_demo\js：存放js包，主要包括vue.js、jquery.js等；
vue_demo\src：存放体验文件，主要是html文件和js文件。
1.2.HTML基础结构及Vue使用基础结构
1.2.1如下是本例体验html结构和Vue体验基础结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue体验</title>
</head>
<body>
<div id="app">
<div>{{info}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
info: '开始体验Vue,使用插值表达式{{}}'
}
});
</script>
</body>
</html>1.2.2功能：在id="app"的div标签中使用插值表达式显示信息Vue对象传递的数据。
1.2.3Vue创建
创建Vue对象是使用new关键字，如上语法是Vue构造函数，在源码中有如下标识：'Vue is a constructor and should be called with the `new` keyword'。
在Vue.js源码中是如下：
function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}1.2.4Vue入参选项
Vue的入参是一个对象，本质是一个JSON格式本例中传入对象是：
{el: '#app',
data: {
info: '开始体验Vue,使用插值表达式{{}}'
}}其中：el代表这个Vue对象需要绑定的元素，data表示这个Vue对象与绑定元素交互数据，el和data是固定写法。
入参中options选项：el，template:data，props，computed，methods，watch，directives，filters，components等。
细节查找官网：https://cn.vuejs.org/的菜单路径：学习->API
1.2.5在浏览器中打开index01.html
Vue实例的data中的info属性的字符串显示在标签<div>{{info}}</div>中的插值表达式中。
2.体验v-text,v-html,v-show,v-cloak,v-once,v-pre,v-model指令
2.1HTML标签
<div id="app">
<div><strong>开始体验Vue</strong></div>
<div>{{info}}</div>
<div><span>体验指令: v-pre ,显示原始Mustache标签 </span><span v-pre>{{info}}</span></div>
<div v-text="infoVtext"></div>
<div v-html="infoVhtml"></div>
<div v-show="infoVshow">体验指令: v-show ,true显示,false不显示</div>
<div v-cloak>{{infoVcloak}}</div>
<div v-once>{{infoVonce}}</div>
<div>
<div><span>体验指令: v-model ,双向数据绑定</span></div>
<div><span>输入: </span><input type="text" v-model="infoVmodel" style="width: 300px;"></div>
<div><span>变化: </span><span>{{infoVmodel}}</span></div>
</div>
</div>2.2对应Vue代码
var vm = new Vue({
el: '#app',
data: {
info: '体验插值表达式{{}} ,显示计算后内容',
infoVtext: '体验指令: v-text ,填充纯文本',
infoVhtml: '<span>体验指令: v-html ,填充HTML片段</span>',
infoVshow: true,
infoVcloak: '体验指令: v-cloak ,不会显示,直到编译结束',
infoVonce: '体验指令: v-once ,只渲染元素和组件一次',
infoVmodel: '请输入体验双向绑定'
}
});2.3效果
运行效果如下：
3.体验v-on
3.1HTML标签
<div id="app">
<div><strong>开始体验Vue的v-on简写@</strong></div>
<div>体验指令: v-on:click</div>
<div><button v-on:click="handleAddNum">点击</button><span v-text="addNum"></span></div>
<div>体验指令: @click</div>
<div><button @click="handleAddNum2">点击</button><span v-text="addNum2"></span></div>
<div>体验在函数中传入event</div>
<div><button @click="handleEvent($event)">点击</button><span v-text="getEvent"></span></div>
<div>体验在函数传入多个参数</div>
<div><button @click="handleMore('浙江','中国')">点击</button><span v-text="result"></span></div>
<div>体验函数有返回值</div>
<div><span>函数返回值: </span><span v-text="handleReturn()"></span></div>
<div>体验事件冒泡</div>
<div @click="handleBubbleMain">
<div v-text="mainNum"></div>
<button @click='handleBubbleSub'>点击</button>
</div>
<div>体验阻止事件冒泡@click.stop</div>
<div @click="handleStopBubbleMain">
<div v-text="stopMainNum"></div>
<button @click.stop='handleStopBubbleSub'>点击</button>
</div>
</div>3.2对应Vue代码
var vm = new Vue({
el: '#app',
data: {
addNum: 0,
addNum2: 0,
getEvent:'',
result:'',
mainNum:0,
stopMainNum:0
},
methods: {
handleAddNum: function () {
this.addNum++;
},
handleAddNum2: function () {
this.addNum2++;
},
handleEvent: function (event) {
//event.target返回事件元素对象
this.getEvent=event.target.tagName;
},
handleMore:function(city,country){
this.result = city + '在' +country;
},
handleReturn: function(){
return '杭州在浙江';
},
handleBubbleMain:function(){
this.mainNum++;
},
handleBubbleSub:function(){ },
handleStopBubbleMain:function(){
this.stopMainNum++;
},
handleStopBubbleSub:function(){}
}
});3.3效果
运行效果如下：
4.体验v-bind
4.1样式标签
<style>
.rectangle {
width: 200px;
height: 30px;
}
.colorInfo {
border: 2px solid blue;
background-color: green;
}
</style>4.2HTML标签
<div id="app">
<div><strong>开始体验Vue的v-bind简写:</strong></div>
<div>体验指令: v-bind:href</div>
<a v-bind:href="infoUrl01">vuejs官网</a>
<div>体验指令: v-bind:href简写 :href</div>
<a :href="infoUrl02">API文档</a>
<div>体验指令: v-bind绑定class绑定对象</div>
<div :class="{rectangle:isRectangle,colorInfo:isColorInfo}"></div>
<div>体验指令: v-bind绑定class绑定数组-方式一</div>
<div :class="[arrayRectangle,arrayColorInfo]"></div>
<div>体验指令: v-bind绑定class绑定数组-方式二</div>
<div :class="arrayClass"></div>
<div>体验指令: v-bind绑定class绑定对象</div>
<div :class="objClass"></div>
<div>体验指令: v-bind绑定style</div>
<div :style="{width: styleWidth, height:styleHeight,
backgroundColor:styleBackGround}"></div>
<div>体验指令: v-bind绑定style绑定对象</div>
<div :style="objStyle"></div>
<div>体验指令: v-bind绑定style绑定数组</div>
<div :style="[objStyle,forBoder]"></div>
</div>4.3对应Vue代码
var vm = new Vue({
el: '#app',
data: {
infoUrl01: 'https://cn.vuejs.org/',
infoUrl02: 'https://developer.mozilla.org/zh-CN/',
isRectangle: true,
isColorInfo: true,
arrayRectangle:'rectangle',
arrayColorInfo:'colorInfo',
arrayClass:['rectangle','colorInfo'],
objClass:{
rectangle:true,
colorInfo:true
},
styleWidth: '200px',
styleHeight: '30px',
styleBackGround:'red',
objStyle:{
width: '200px',
height: '30px',
backgroundColor: 'red'
},
forBoder:{
border: '2px solid blue'
}
}
});4.4效果
运行效果如下：
?
5.体验v-if,v-else,v-else-if,v-for
5.1HTML标签
<div id="app">
<div><strong>开始体验Vue的分支和循环</strong></div>
<div style="color: red;">体验指令: v-if,v-else,v-else-if</div>
<div>
<div><span>输入: </span><input type="text" v-model="info"></div>
<div><span>结果: </span>
<span v-if="info>100000">高薪</span>
<span v-else-if='info<=99999&&info>=10000'>中等</span>
<span v-else-if='info<10000&&info>=5000'>正常</span>
<span v-else>努力中</span>
</div>
</div>
<div style="color: red;">体验指令: v-for,遍历数组</div>
<div v-for='item in citys'>{{item}}</div>
<div style="color: red;">体验指令: v-for,遍历数组包含对象</div>
<div :key='item.id' v-for='item in ProvincialCapital'>
省名称: {{item.province}}, 市名称: {{item.capital}}
</div>
<div style="color: red;">体验指令: v-for,遍历对象</div>
<div v-for='(value,key,index) in girlInfo'>
key(字段名称): {{key}},
value(字段值): {{value}},
index(字段索引): {{index}}
</div>
</div>5.2对应Vue代码
var vm = new Vue({
el: '#app',
data: {
info: 0,
citys: ['杭州', '宁波', '绍兴'],
ProvincialCapital: [
{id: 1,province: '浙江',capital: '杭州'},
{id: 2,province: '福建',capital: '福州'}],
girlInfo:{ cup:'C',name:'小北',height: 160 }}
});5.3效果
运行效果如下：
?
以上，感谢。
2021年9月11日