Vue静态资源目录及常用指令
开始写代码前，先将vue中App.vue页面原有的内容清空，清空后如下
静态资源目录
在项目上可以配置public 或者static为静态资源目录
一.静态资源目录的访问
可以在网页代码中访问静态资源目录
<div id="app">
<img src="public/logo.png" alt="">
</div>
或者网页网址栏直接访问
二.vue常用指令
1.绑定数据和绑定属性
①用绑定模板 { { }}
v-model 绑定表单元素值 数据双向绑定
v-bind 绑定属性 绑定类名称 单向绑定
双向绑定：更改input文本框里边的内容，{ {}}里边绑定的数据也会更改
<template>
<div id="app">
<p>{
{
msg}}</p>
<p>{
{
msginfo}}</p>
<p>
<input type="text" v-model="msginfo">
</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:"111111",
msginfo:"sadjsnh"
}
}
}
</script>
面试题：如何阻止事件双向？？？？
②V-bind
① v-bind 可以简写成 :
② 直接绑定类名称的变量名称
v-bind:class=“classname”③ 一次性绑定多个类名称 通过true false值可以动态添加 v-bind:class="{‘p1’:true,‘p2’:true}"
④ 多个类绑定 数组写法 通过变量来操作 数组里边写变量名称 v-bind:class="[classname,classnameone]"⑤ 可以绑定样式 style
绑定多个样式，中间用逗号隔开，属性值和属性名称都要带引号
v-bind:style="{‘backgroundColor’:‘red’,‘height’:‘30px’}"
也可以通过变量的变化来修改style值 变量名称不需要加引号
v-bind:style="{‘color’:color}" 第二个color是变量名称⑥ 也可以声明一个对象，对象里边有多个变量
v-bind:style=“pstyle” pstyle 就是我们在return里边声明的对象
<template>
<div id="app">
//直接绑定类名称的变量名称
<p v-bind:class="classname">
写作业呀
</p>
<p v-bind:class="classnametwo">
写作业呀
</p>
//一次性绑定多个类名称 通过true false值动态添加
<p v-bind:class="{'p1':true,'p2':true}">
1111
</p>
//多个类绑定 数组写法 通过变量来操作
<p v-bind:class="[classname,classnameone]">
哈哈哈哈哈
</p>
//可以直接绑定样式style值
<p v-bind:style="{'backgroundColor':'red','height':'30px'}">
学习啊
</p>
<p v-bind:style="{'color':color}">
啊啊啊啊啊啊
</p>
//声明一个对象，对象里边可以有多个变量
<p v-bind:style="pstyle">
努力的学习！！！
</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:"111111",
msginfo:"sadjsnh",
classname:"p1",
classnameone:"p2",
classnametwo:"p1 p2",
color:"red",
pstyle:{
"color":"pink",
"font-size":"20px"
}
}
}
}
</script>
<style lang="less">
.p1{
color: aqua;
border: solid 1px saddlebrown;
}
.p2{
background-color: antiquewhite;
}
</style>
③V-html V-text 绑定元素的文本值
v-html 可以自动解析字符串标签
v-text 不可以解析标签，直接文本显示
<template>
<div id="app">
<p v-html="num"></p>
<p v-text="num"></p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
num:"绑定"
}
}
}
输出结果如下图
2.循环渲染数据
v-for
① v-for=" " 双引号里边用in循环，标签里边的所需要的值，用{ { }}代入其中
② 渲染谁给谁写
③ key值不能重复
<template>
<div id="app">
<ul>
<li v-for="item in num" :key="item">
{
{
item}}
</li>
</ul>
//循环数组
<ul>
<li v-for="(item,index) in num" :key="index">
{
{
item+"/"+index}}
</li>
</ul>
//循环媒体对象
//数据嵌套 一个属性对应多个值
<ul>
<li v-for="(item,index) in object" :key="index">
序号：{
{
index}}
姓名：{
{
item.name}}
性别：{
{
item.sex}}
<span v-for="(show,i) in item.hobby" :key="i">
{
{
show}}，
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
num:[1,2,3,4,5,6,7],
object:[
{
name:"张三",
sex:"男",
hobby:["篮球","排球"]
},
{
name:"李四",
sex:"男",
hobby:["篮球","排球","乒乓球"]
},
{
name:"王五",
sex:"男",
hobby:["游戏"]
}
]
}
}
}
</script>
执行后的结果如下图
3.显示隐藏
v-show v-hidden 显示隐藏
v-show=" " 双引号里边可以写变量，布尔值，三目运算符
<p v-show="true">
我是显示
</p>
<p v-show="false">
我是隐藏
</p>
<p v-show="num!=0?true:false">
显示
</p>
<p v-show="num==0?true:false">
隐藏
</p>
4.条件渲染
v-if v-else v-else-if
① v-if=" " 双引号里面可以写代码，也可以写变量，布尔值，三目运算符
② 条件渲染语句可以直接写给模板
③ 三者连用相当于if else if else 语句
<template>
<div id="app">
<p v-if="btn">
我在看你
</p>
<p v-else-if="btn==0">
see
</p>
<p v-else>
我不看你
</p>
//条件渲染语句可以直接写给模板
<template v-if="btn">
<div>
马上要睡觉了
</div>
</template>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
btn:false
}
}
}
</script>