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:"<span>绑定</span>"
    }
  }
}

输出结果如下图

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>