首页
酷软
系统
游戏
媒体
- 电影
- 剧集
- 动画
- 记录
- 综艺
- MV
- 有声世界
云资源
源码
更多
- 文库
- web
- 站长帮
- 玩电脑
- 玩游戏
- 玩手机
- 涨姿势
- 玩软件
- 云图志
- 看漫画
- 微读书
- PS玩家
- 网文网语
- 硬件数码
- 编程开发
- 神秘之旅
- 福利线报
- 商业资源
- 网赚相关
- 健康加油站
赞助专区
云盘专区
资源阁
缘聚岛

[WEB] Vue.JS基础以及本地指令：v-text，v-html，v-on，v-show

作者：CC下载站日期：2020-06-18 00:00:00 浏览：62 分类：站长帮

为了不让这位爷的青春终结，我来日更了。感谢各位的支持。

这几天学了点Django，感觉js也得接触下了，于是看到学习站上有一套黑马程序员的4小时快速入门Vue.js的教程，发现Vue.Js似乎挺容易的。

Vue.Js官方文档：https://cn.vuejs.org/v2/guide/

第一个指令：v-text：设置标签的文本值(textContent)

首先如果要在网页中使用Vue.Js的话就得先引用Vue（在官方文档有两句，第一句适合开发环境，会有相应提示，第二句更加的快，适合生成环境）

<!--开发环境版本，包含了有帮助的命令行警告-->
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--生产环境版本，优化了尺寸和速度-->
<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>

到这里代码就分为两部分了，一部分写在html中，一部分写在JS中（大概就是用过JS渲染HTML内容了）。

打开了尘封已久的VS Code，并写入了对于Vue的HelloWorld

首先来解释一下这两句话（凭个人感觉理解）：

首先是html里面的这句，新建一个div，ID为Lan，为了方便JS操作的时候找得到这个

<!--www.lanol.cn-->
<divid="Lan">
{{message}}
</div>

这里应该是新建一个app，vue型的，el是选择中我们之前创建的div，data就是数据，message就是我们要展现的text

varapp=newVue({
el:'#Lan',
data:{
message:'HelloVue!'
}
})

首先呢，这个message有两种写法，第一种就是我们刚刚写的Hello Vue这种，用{{}}包围起来，这种写法不会清除原有的内容，

<!--www.lanol.cn-->
<divid="Lan">
{{message}}
</div>

而另一种写法就是写在标签的属性区，这样写也是可以的。

<!--www.lanol.cn-->
<divid="Lan"v-text='message'>
</div>

然后我们来对比一下两者的区别。

<!--www.lanol.cn-->
<divid="Lan">
<h2>{{message}}www.lanol.cn</h2>
<h2v-text='message'>www.lanol.cn</h2>
</div>

由图可以看见，放在{{}}内的www.lanol.cn显示出来了而放在属性区的则看不见了，这就是两者区别了。

在这里面你还可以进行字符串的拼接等操作，如果是{{}}直接加就可以了，而属性区则需要一个+号和引号（因为我包含message用的是单引号，所以里面只能用双引号了如果Python一样）

<divid="Lan">
<h2>{{message}}www.lanol.cn</h2>
<h2v-text='message'>www.lanol.cn</h2>
<h2v-text='message+"www.lanol.cn"'></h2>
</div>

然后需要注意的是message内的内容可以是列表、字典等数据类型（用Python的话说）

第二个指令：v-html：设置标签的innerhtml（说白了就是用JS写HTMl）

这个指令呢就对比着上一个v-text来记录一下。

<body>
<!--www.lanol.cn-->
<divid="Lan">
<h2v-text='message'></h2>
<h2v-html='message'></h2>
</div>

<script>
varapp=newVue({
el:'#Lan',
data:{
message:'<h1>www.lanol.cn</h1>'
}
})
</script>
</body>

可以看见使用了v-text的被直接显示出来了，而v-html则被渲染了，就这？就这。

第三个指令：v-on：为元素绑定事件（click，dblclick，monseenter）

使用方法：

<divid="Lan">
<inputtype="button"value="按钮"v-on:事件名="方法">
<inputtype="button"value="按钮"@事件名="方法">
</div>

varapp=newVue({
el:"#Lan",
methods:{
dolt:function(){
}
}
)}

这里有两种写法，第一个是v-on:事件名="方法"，[email protected]

然后这里就只演示一下click的事件

<body>
<divid="Lan">
<inputtype="button"value="点击按钮"v-on:click="dolt">
<inputtype="button"value="点击按钮"@click="dolt">
</div>

<script>
varapp=newVue({
el:'#Lan',
methods:{
dolt:function(){
console.log("Lan点击了按钮")
}
}
})
</script>
</body>

到此，三个基本指令已经写完了，发现掌握一个东西的最好办法就是将他自己用文字写一遍，就像我这样写一篇笔记，记录一下。

最后这是一个点击就数字就增加或减少的DEMO，过大过小则提示

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>VueJS基本指令学习By：Lan</title>
<!--开发环境版本，包含了有帮助的命令行警告-->
<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<divid="Lan">
<inputtype="button"value="加"@click="add">
<inputtype="button"value="减"@click="sub">
<h2>{{num}}</h2>
</div>
<script>
varapp=newVue({
el:'#Lan',
data:{
num:1
},
methods:{
add:function(){
if(this.num>20){
alert('太大了')
}else{
this.num++;
console.log(this.num)
}
},
sub:function(){
if(this.num<=0){
alert('太小了')
}else{
this.num--;
console.log(this.num)
}
},
}
})
</script>
</body>

</html>

第四个指令：v-show：根据条件决定元素是否显示（并不会从dom树中删除）。

这里呢继续用上一个DEMO来展示。给h2标签加一个v-show='true'

再将这个ture改为false来看一下，发现已经隐藏了，但是源码里面还是可以看得到的

这个true和false就和Python里面的if条件一样，也可以用其他办法来确定真假，如数字未满18则不显示。

<h2v-show='num>=18'>{{num}}</h2>

因为一开始是1，所以不会显示。

然后我们不断点击加知道超过18看看。

第五个指令：v-if：根据表达式的真假切换元素的显示状态。

本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false从dom树中移除

<h2v-if='num>18'>{{num}}</h2>

第六个指令：v-bind：设置元素的属性（src,title,class）。

<body>
<divid="Lan">
<imgv-bind:src="imgSrc"v-bind:title='imgTitle'><br>
<img:src="imgSrc":title='imgTitle'><br>
</div>
<script>
varapp=newVue({
el:'#Lan',
data:{
imgSrc:'https://pan.lanol.cn/zb_users/theme/Blogs/image/logo.png',
imgTitle:'https://www.lanol.cn'
},
})
</script>
</body>