Day1||Vue指令学习

一.v-html

v-html 的内容直接作为普通 HTML 插入------ Vue 模板语法是不会被解析的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <div v-html="msg"></div>
</div>
//导入vue.js包
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
 data: {
   msg: '<a href="https://www.baidu.com"> 跳转到百度 </a>'
 }
  })
</script>
</body>
</html>

二.v-text

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。

html 复制代码

<div id="text">
  {{msg}}
  <div v-text="msg"></div>
</div>

<script>
  var text = new Vue({
    el: '#text',
    data: {
      msg:'这里是文字'
    }
  })
</script>

html 复制代码

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

三.v-show vs v-if

v-show作用：控制元素的显示隐藏

语法：v-show="表达式"表达式值 true 显示，false 隐藏

使用场景：频繁切换显示隐藏

v-if作用：控制元素的显示隐藏（条件渲染）

语法：v-if="表达式"，表达式值 true 显示，false 隐藏

使用场景：要么显示，要么隐藏，不频繁切换

html 复制代码

<body>
<div id="app">
  <div class="A1" v-show="flag">我是v-show的盒子</div>
  </br>
  <div class="A1" v-if="flag">我是v-if的盒子</div>
</div>

<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
        flag: false
    }
  })
</script>
</body>

当flag为false时

v-show修改的是css里的display来控制显示隐藏

v-if在根据判断条件来控制元素的创建和删除

四.v-else 和 v-else-if

作用：辅助v-if进行判断渲染

html 复制代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="hello">
  <p v-if="sex === 1">性别：男</p>
  <p v-else>性别：女</p>
  </br>
  <hr>
  <p v-if="score >= 80">成绩A：电脑一台</p>
  <p v-else-if="score >= 70">成绩B：手机一台</p>
  <p v-else-if="score >= 60">成绩C：零食大礼包</p>
  <p v-else>成绩E：惩罚</p>

</div>

<script src="js/vue.js"></script>
<script>
  const hello = new Vue({
    el: '#hello',
    data: {
        sex:1,
        score:80
    }

  })
</script>
</body>
</html>

五.v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

1. v-on ：事件名 = "内联语句"

(内敛语句L一段可执行的代码)

2.v-on : 事件名 = "methods中的函数名"

html 复制代码

//1. v-on ：事件名 = "内联语句"
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <button v-on:click="msg--">-</button>
  <span>{{msg}}</span>
  <button v-on:click="msg++">+</button>
</div>

<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: 0
    },

  })
</script>
</script>
</body>
</html>

html 复制代码

2.v-on : 事件名 = "methods中的函数名"
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <button v-on:click="fn()">-</button>
  <span>{{msg}}</span>
  <button v-on:click="fn1()">+</button>
</div>

<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: 0
    },
    methods:{
      fn(){
        this.msg--
      },
      fn1(){
        this.msg++
      }
    }
  })
</script>
</script>
</body>
</html>

示例2：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<button v-on:click="fn">切换显示隐藏</button>
  <h1 v-show="msg">我要学习</h1>
</div>

<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg:true
    },
    methods:{
      fn(){
        console.log("点击了切换显示隐藏");
        app.msg = !app.msg;
      }
    }
  })
</script>
</script>
</body>
</html>

实现隐藏切换

注意：让提供的所有methods中的函数，this都指向当前实例

3.v-on调用传参

案例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <div class="box">
    <h3>自动售货机</h3>
    <button v-on:click="fn(5)">可乐5元</button>
    <button v-on:click="fn(10)">咖啡10元</button>

  </div>
  <p>银行卡余额为：{{total}}</p>

</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      total:100
    },
    methods:{
      fn(a){
        this.total -= a
      }
    }
  })
</script>
</body>
</html>

六.v-bind

作用：动态设置html的标签属性,eg:src,url,title

表达式：

复制代码

v-bind：动态设置html的标签属性
v-bind:属性名 = “表达式”
v-bind:src 可以省略为：src

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--v-bind：动态设置html的标签属性
v-bind:属性名 = "表达式"
v-bind:src 可以省略为：src
-->
<div id="app">
  <img v-bind:src="imgurl" alt="照片1">
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgurl:'./img/1.jpg'
    },
    methods:{

    }

  })
</script>

</body>
</html>

七.图片切换案例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .A1{
      width:200px;
      height:100px;
    }
  </style>
</head>
<body>

<div id="app">
<button v-show="index>0" @click="index--">上一页</button>
  <img v-bind:src="list[index]" alt="" class="A1">
  <button v-show="index<3" @click="index++">下一页</button>
</div>

<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
 data: {
      list:[
        './img/1.jpg',
        './img/2.jpg',
        './img/3.jpg',
        './img/4.jpg',
      ],
   index:0
 },
   methods: {

   }
  })
</script>
</body>
</html>

八.v-for

作用：基于数据循环，多次渲染整个元素

语法：v-for = "（item,index） in 数组"

item每一项，index下标

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<h1>水果店</h1>
  <ul>
    <li v-for="(item,index) in list">{{item}}</li>
  </ul>
</div>

<script src="js/vue.js">
</script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      list:['西瓜','香蕉','苹果']
    },
    methods:{

  }
  })
</script>
</body>
</html>

九.案例-书架

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>书架</h1>
  <ul>
    <li v-for="(item,index) in booklist">
      {{item.name}}
      {{item.author}}
      <button v-on:click="del(item.id)" >删除</button>
    </li>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      booklist:[
        {id:1,name:'《红楼梦》',author:'曹雪芹'},
        {id:2,name:'《西游记》',author:'吴承恩'},
        {id:3,name:'《三国演义》',author:'罗贯中'},
        {id:4,name:'《水浒传》',author:'施耐庵'},
      ]
    },
    methods: {
      del(id){
        console.log('点击了删除'+id)
        //filter:根据条件，保留满是条件的对应项，得到一个新数组。

        console.log(this.booklist.filter(item => item.id != id))
        this.booklist=this.booklist.filter(item => item.id != id)
      }
    }})

</script>
</body>
</html>

十.v-for中的key

html 复制代码

<li v-for="(item,index) in booklist" :key="item.id">
      {{item.name}}
      {{item.author}}
      <button v-on:click="del(item.id)" >删除</button>
    </li>

作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用

语法：key属性 = "唯一标识"

十一.v-model

作用：给表单元素使用，双向数据绑定→ 可以快速获取或设置表单元素内容

数据变化------视图自动更新

视图变化------数据自动更新

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  账户：<input type="text" v-model="user"><br>
  密码：<input type="password" v-model="pwd"><br>
  <button @click="login">登录</button>
  <button @click="reset">重置</button>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      user:'',
      pwd:''
    },
    methods: {
      login(){
        console.log("账号：",this.user,"密码：",this.pwd)
      },
      reset(){
        this.user = null;
        this.pwd = null;
      }
    }
  })

</script>
</body>
</html>