您的位置:首页 > Web前端 > Vue.js

vue基础(1):vue的使用步骤及常用指令

2020-02-02 13:51 1106 查看

一.Vue的使用步骤

1.引包
①在html文件中引入script标签,指定文件
<script type="javascript/text" src="../js/vue.js"></script>
②留坑,留一个vue模板插入的地方,或者是vue代码生效的地方
<div id="app">(坑位)</div>
③实例化vue 启动vue
<script type="javascript/text">
new Vue({
el:"#app",
template:`
//需要向坑位中添加的标签及其内容
....
`,
data:function(){
return{
.....
//定义在标签中使用的变量
}
}
})
</script>

el:目的地信息,对应留坑的坑位,可以通过id名、类名、标签名来查找
template:存放在坑位中需要添加的内容
数据:data 值为函数的形式也可以是对象,但是都是用函数,因为函数最后也是return一个对象
注意:a.template内的内容是tab键上的波浪线键,可以自动识别换行等操作
b.data内return的值的语法应为 属性:值,例如:
return{
num:1
}
c.Vue的每个属性之间使用','(逗号)隔开

2.插值表达式
插值表达式内填入data里面的变量即可在页面获取到变量的值  例如{{data里的任意变量}}浏览器会自动将双大括号内的值进行解析

二.Vue中常用的指令

1.指令的概念与语法
在vue中提供一些对页面和数据的更为方便的操作,这些操作就叫做指令。在Vue中,指令的语法格式为:
<div v-xxx=''></div>

2.常用的指令

①v-text:向标签内插入文本信息 不解析标签信息
②v-html:向标签内插入并解析文本信息
用法举例:
new Vue({
....,
template:`
<div>
<div v-text='mytext'></div>
<div v-html='myhtml'></div>
</div>
`,
data:function(){
return{
mytext:'<h1>检测标签是否被识别</h1>',
myhtml:'<h1>检测标签是否被识别</h1>'
}
}
})
在上述用法中,带有mytext的div中,浏览器认为<h1></h1>标签是字符串'<h1></h1>';而在带有myhtml的div中,
浏览器会解析其中的标签<h1></h1>

③v-if:v-if 后接的表达式应为条件表达式,并且使用单引号引起来。
例如:<div v-if='num==1'>测试v-if</div>
Vue会在data中找到v-if所需要的条件,并根据条件表达式的返回值判断,如果为false,则
不显示标签内的内容。
也可以在v-if内存放变量:
<div v-if='checkvif'></div>

在data内对checkvif进行条件判断。如果表达式为真,则标签内的内容显示;如果表达式的内容不为真,则不显示标签内容。

④v-else-if、v-else 一般都与v-if联立使用。注意:v-else后不需要接具体的表达式。

⑥v-show :作用和v-if很相似,都是可以通过条件判断表达式来控制标签内部,两者的区别是控制不同的css属性对标签内部的内容进行
隐藏。两者的区别请自行百度。

⑦v-for:	这个标签的作用是对data中定义的数组、对象进行循环遍历。具体示例如下:
new Vue({
....,
template:`
<div>
<div v-for='(item,index) in forArray'>
数组的元素是:{{item}},当前序号是:{{index}}
</div>
<div v-for='(value,key) in forObject'>
对象的key是:{{key}},value是:{{value}}
</div>
</div>
`,
data:function(){
return{
forArray:[1,2,3,4,5],
forObject:{'name':'123','age':13}
}
}
})
对象采用的是Json格式进行书写。数组和对象的循环语法为: v-for='(记录当前值的记录器,下标/key) in 数组名/对象名'。
  • 点赞
  • 收藏
  • 分享
  • 文章举报
曹真言 发布了5 篇原创文章 · 获赞 0 · 访问量 526 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: