VUE指令笔记

VUE.JS官网

https://cn.vuejs.org/

el:挂载点

1. Vue实例的作用范围是什么呢?

   Vue会管理el选项命中的元素及其内部的后代元素

2. 是否可以使用其他的选择器?

   可以使用其他的选择器，但是建议使用ID选择器

3. 是否可以设置其他的dom元素呢?

   可以使用其他的双标签,不能使用HTML和BODY

4. el是用来设置Vue实例挂载(管理)的元素

data：数据对象

1. Vue中用到的数据定义在data中
2. data中可以写复杂类型的数据
3. 渲染复杂类型数据时,遵守js的语法即可

V-text

设置标签的内容(textContent)，默认写法会替换全部内容，使用差值表达式{ }可以替换指定内容

html代码：

  <div id="app">
            <h2 V-text="message+'!'"></h2>
            <h2>让我猜猜{{ message +"! "}</h2>
  </div>

js代码：

 <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你是谁"
            }
        })
</script>

V-html

设置标签的innerHTML，将一个html语句挂上去

1. v-html指令的作用是:设置元素的innerHTML
2. 内容中有html结构会被解析为标签
3. v-text指令无论内容是什么,只会解析为文本
4. 解析文本使用v-text,需要解析html结构使用v-html

html代码

<div id="app">
    <p v-html="content"></p>
</div>

js代码

     <script>
        var app = new Vue({
            el: "#app",
            data: {
                content:"<a href='#'>一起学习</a>"
            }
        })
    </script>

V-On基础

为元素绑定事件，v-on：<=> @

1. v-on指令的作用是:为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中

html代码：

    <div id="app">
            <input type="button" value="事件绑定" v-on:click="dolt">
            <input type="button" value="事件绑定" v-on:monseenter="dolt">
            <input type="button" value="事件绑定" v-on:dblclick="dolt">
            <input type="button" value="事件绑定" @dblclick="dolt">
    </div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        data: {
          
        },
         methods:{
            dolt: function() {
                //逻辑
            }
        }
    })
</script>

V- show（适用于频繁切换）

根据表达值的真假，切换元素的显示和隐藏

1. v-show指令的作用是:根据真假切换元素的显示状态
2. 原理是修改元素的display,实现显示隐藏
3. 指令后面的内容,最终都会解析为布尔值
4. 值为true元素显示,值为false元素隐藏
5. 数据改变之后，对应元素的显示状态会同步更新

html代码：

<div id="app">
    <img src="地址” v-show="true">
    <img src="地址" v-show= "isShow">
    <img src="地址" v-show="age>=18">
</div>

js代码：

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

V-if

根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

1. v-if指令的作用是:根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true,元素存在于dom树中，为false,从dom树中移除
4. 频繁的切换v-show,反之使用v-if,前者的切换消耗小

html代码

<div id="app">
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="表达式">我是一个p标签</p>
</div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: false,
        }
    })
</script>

V-bind

设置元素的属性(此如:src,title,class)，其中v-bind可以省略不写

1. v-bind指令的作用是:为元素绑定属性
2. 完整写法是v-bind:属性名
3. 简写的话可以直接省略v-bind,只保留:属性名

html代码：

<div id="app">
        <img :src="imgSrc">
        <img :title="imgtitle+'!!!'">
        <img :class="isActive?' active':''>
        <img :class="{active:isActive}">
 </div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        data: {
            imgSrc: "图片地址",
            imgTitle: "猜猜看",
            isActive: false
        }
    })
</script>

V-for

根据数据生成列表结构

1. -for指令的作用是:根据数据生成列表结构
2. 数组经常和v-for结合使用
3. 语法是( item,index ) in 数据
4. item和index可以结合其他指令一起使用
5. 数组长度的更新会同步到页面上，是响应式的

html代码

  <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                {{ index }}{{ item }}
            </li>>
            <li v-for="(item,index) in objArr">
                {{ item.name }}
            </li>>
        </ul>
    </div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr:
                [1, 2, 3, 4, 5],
            objArr: [
                { name: "jack" },
                { name: "rose" }
            ]
        }
    })
</script>

V-on补充

传递自定义参数,事件修饰符
文档传送门： https://cn.vuejs.org/v2/api/#v-on

1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
2. 事件修饰符有多种
3. 事件的后面跟上.修饰符可以对事件进行限制
4. .enter可以限制触发的按键为回车
5. 定义方法时需要定义形参来接收传入的实参

html代码：

    <div id="app">
            <input type="button" @click=" dolt(p1,p2)" />
            <input type="text" @keyup.enter="sayHi">
    </div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        methods: {
            dolt: function (p1, p2) { },
            sayHi: function () { }
        }
    })
</script>

V- model

获取和设置表单元素的值(双向数据绑定)

1. v-model指令的作用是便捷的设置和获取表单元素的值
2. 绑定的数据会和表单元素值相关联
3. 绑定的数据<=>表单元素的值

html代码：

    <div id="app' ">
            <input type="text" v-model="message" />
    </div>

js代码：

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:
                "努力学习"
        }
    })
</script>

网络应用

Vue结合网络数据开发应用
Axios: 功能强大的网络请求库

1. axios必须先导入才可以使用
2. 使用ge或post方法即可发送对应的请求
3. then方法中的回调函数会在请求成功或失败时触发
4. 通过回调函数的形参可以获取响应内容，或错误信息

坐标：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

语法：
axios. get(地址？key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios+vue

html代码：

<input type="button" value="post请求" class="post">
<div class="main">
    <input type="button" value="获取笑话" @click="getJokes"><br>
    <span>{{jokes}}</span>
</div>

js代码：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>

        /*接口1:随机笑话
        请求地址: https://autumnfish.cn/api/jokest
        请求方法:get
        请求参数:num(笑话条数，数字)
        响应内容:随机笑话*/
        var app = new Vue({
            el: ".main",
            data: {
                jokes: "好笑的笑话"
            },
            methods: {
                getJokes: function () {
                     var that=this;
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(res => {
                            that.jokes=res.data;
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }
            },

        })
    </script>

注意：

1. axios回调函数中的this已经改变无法访问到data中数据
2. 把this保存起来，回调函数中直接使用保存的this即可