Vue学习笔记（一）

目录

• Vue（渐进式JavaScript框架）概述
• Vue的数据渲染
• Vue的插值表达式
• Vue的基础指令
  • v-text
  • v-html
  • v-bind
  • v-for
  • v-model
  • v-on
  • v-if
  • v-show

Vue（渐进式JavaScript框架）概述

Vue是一套用于构建用户界面的渐进式框架。

Vue的数据渲染

• 第一步：引入Vue文件
  1. CMD进入当前工程的文件夹
  2. npm init -y 生成package.json文件
  3. npm i vue 加载Vue包
  4. 在HTML文件中引用Vue.js

  <script src="node_modules/vue/dist/vue.min.js"></script>
  

• 第二步：创建一个vue实例(对象)，这个实例用来管理html代码

  var vm = new Vue();
  

• 第三步：对象中的el属性，用来指定需要管理的范围，值需要一个标签的id

  var vm = new Vue({
      el:"#root",
  })
  

• 第四步：对象中的data属性，用来保存页面需要用到的数据

  var vm = new Vue({
      el:"#root",
      data:{
          msg:"Hello"
      }
  })
  

• 第五步：将data中的数据绑定到页面上，在{{}}中写data的属性名即可

  <div id="root">
      <p>{{ msg }} vue !!</p>
  </div>
  <!-- 不在vue的管辖范围内，不会渲染数据 -->
  <p>{{ msg }} vue !!</p>
  

Vue的插值表达式

<!-- 不多bb 是什么玩意自己领会 -->
<div id="app">
    <h1>{{ userName }}</h1>
    <h1>{{ userName + "搬家"}}</h1>
    <h1>{{ age + 1 }}</h1>
    <h1>{{ age > 18 ? "成年" : "未成年" }}</h1>
    <h1>{{ userName.split("").reverse().join("") }}</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            userName:"xxx",
            age:18,
        }
    })
</script>

Vue的基础指令

v-text

• v-text的值可以设置表达式，与差值表达式相同
• v-text会替换掉标签的内容

<div id="app">

    <!-- 这个显示的是小明 -->
    <h1 v-text="userName"></h1> 

    <!-- 这个显示的也是小明 -->
    <h1 v-text="userName">~~~~~~~~~~</h1>

    <!-- 使用v-text不会让浏览器渲染标签 -->
    <div v-text="htmlStr"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            userName:"小明"
            htmlStr:"<h2>吵架</h>"
        }
    })
</script>

v-html

• v-html可以在HTML页面上渲染标签
• 但是v-html使用不安全，一般很少用

<div id="app">
    <!-- 这里显示的是h2标签的 “吵架” -->
   <div v-html="htmlStr"></div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            htmlStr:"<h2>吵架</h>"
        }
    })
</script>

v-bind

• v-bind 可以给标签动态绑定属性

    <div id="app">

        <!-- 给img标签添加src地址 -->
        <img v-bind:src="imgSrc" alt="">
        <!-- 简写 -->
        <img :src="imgSrc" alt="">

        <!-- 给a标签添加href地址 -->
        <a :href="theHref">Vue官网</a>
        <!-- a标签地址的字符串拼接 -->
        <a :href="'delete.php?id=' + theId">删除</a>

        <!-- ES6的模板字符串 这样写也行 -->
        <a :href="'delete.php?id=${theId}'">删除</a>

        <!-- {red:flag} red是类名 flag为true时该标签设置这个类名 -->
        <p :class="{red:flag}">中午吃啥</p>
        <p :class="{red:age == 18}">中午吃啥</p>

    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://cn.vuejs.org/images/logo.png",
                theId:111,
                theHref:"https://cn.vuejs.org/v2/api/#v-text",
                flag:true,
                age:1
            }
        })
    </script>

v-for

• v-for 遍历数组、json元素用

    <div id="app">
        <ul>
            <!-- item 数组中的每一项 list data中的数组 -->
            <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
        </ul>

        <ul>
             <!-- item 数组中的每一项 index数组的下标 -->
            <li v-for="(item,index) in list" :key="index">
                {{ index }} : {{ item.name }}
            </li>
        </ul>

        <ul>    
            <li v-for="value in user" :key="value">
                {{ value }}
            </li>
        </ul>

        <ul>
            <li v-for="(value,key,index) in user">
                {{ key }} : {{ value }} ------- {{ index }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{              
                list:[
                    {id:1,name:"xxx"},
                    {id:2,name:"zzz"},
                    {id:3,name:"ccc"}
                ],
                user:{name:"vvv",age:20}
            }
        })
    </script>

v-model

• v-model 可实现数据双向绑定，这个指令只能给input、textarea、select使用

<div id="app">
    <input type="text" v-model="msg" >
    <input type="text" :value="msg" >
    <h1>{{ msg }}</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"Hello Vue"
        }
    })
</script>

v-on

• v-on 绑定事件

<!-- 点击事件绑定 -->
<div v-on:click="changeName">点击改变name</div>
<!-- 这个是简写 -->
<button @click="changeName">点击改变name</button>


<!-- 函数传参 -->
<button @click="abc('ccc')">传参</button>

<!-- 获取时间对象 -->
<button @click="getEvent($event)">获取事件对象</button>

<!-- 事件修饰符-阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="baidu">百度一下</a>

<!-- 按键修饰符 -->
<!-- 按回车键响应 -->
<input type="text" v-model="name" @keyDown.enter="submit">
<!-- 按65号键响应 -->
<input type="text" v-model="name" @keyDown.65="submit">


<!-- methods中的点击事件中的this 指的是 新建的Vue对象 -->
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"xxxx"
        },
        methods: {
            changeName(){
                console.log(this === vm);
                this.name = "zzz";
            },
            abc(newName) {
                this.name = newName;
            },
            getEvent(e) {
                console.log(e);
            },
            baidu() {
                console.log("百度一下");
            },
            submit() {
                alert("点击回车");
            }
        },
    })
</script>

v-if

• v-if 根据条件创建标签

<div id="app">
<!-- 只显示第一个p标签 -->
    <p v-if="age >= 18">已成年</p>
    <p v-if="age < 18">未成年</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{              
            age:18,
        }
    })
</script>

v-show

• v-show 标签全部创建 但是根据条件显示

<div id="app">
<!-- 标签都创建，只显示第一个p标签，第二个隐藏display -->
    <p v-show="age >= 18">已成年</p>
    <p v-show="age < 18">未成年</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{              
            age:18,
        }
    })
</script>