Vue简单使用

概述:

Vue、渐进式框架、视图层、为复杂的单页应用（SPA）提供驱动

入门：

1、基本样式

1-1、采用cdn的方式 （script做导入）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1-2、书写代码

    <div id="app">
        <!-- 控制数据的渲染 {{}} 模板语法 里面传入对应的data里面的key -->
        {{message}} 
    </div>
    <script>
        //VM就是viewmodel
        var vm = new Vue({
            el:"#app",//挂载点 操作的视图在哪 传入的选择器  不能挂载body和html的
            data:{ //数据
                message:"hello vue" //message 键对应的值hello vue
            }
        })
    </script>

2、模板语法 {{}}

支持表达式、算术运算、赋值运算、三元运算以及对应的方法

    <div id="app">
        <!-- 控制数据的渲染{{}}模板语法 里面传入对应的data里面的key -->
        <!-- {{data里面的key,表示的是渲染相关的值 支持对应的表达式}} -->
        {{massage}}
        {{number?massage:"1"}}
        {{massage!="123"}}
        {{massage=="123"}}
        <!-- 算术运算 -->
        {{number+1}}<!-- 1     number=5赋值之后就发生变化了 6 -->
        {{number-1}}<!-- -1                               4 -->
        {{number*10}}<!-- 0                               50   -->
        {{number/10}}<!-- 0                               0.5  -->
        {{number%10}}<!-- 0                                5 -->
        <!-- 赋值运算 将数据进行赋值之后就会将原来的数据也进行修改-->
        {{number=5}}
        <!-- 支持三元运算符 -->
        {{number==5?"world":"hello"}}
        <!-- 支持对应的方法 -->
        {{massage.substring(0,2)}}
        {{massage.trim()}}
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        // vm就是viewmodel
        var vm = new Vue({
            el: "#app",//挂载点,操作的视图在哪 传入的选择器 不能挂载body和HTML标签
            data: {//数据
                massage: " 12345",//键值对
                number: 0
            }
        })
    </script>

3、Vue指令

v-text（innerText）

v-html （innerHtml 他不能放在xsl攻击）

    <div id="app">
        {{code}}
        <!-- vue指令是以v-开头 他都是作用给标签的,相当于(并不是)属性与属性值,值是data里面的数据 -->
        <div v-text="code"></div><!-- 可以防止XSL攻击,script脚本注入 -->
        <div v-html="code"></div>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                code:"<h2>你好世界</h2>"
            }
        })
    </script>

条件渲染 （控制对应的渲染）v-if    v-else-if    v-elsshow 控制对应的显示

v-if 和v-show的区别和作用范围：

        v-if 控制对应的元素渲染 如果为false就不会渲染  
        v-show 他不管是true还是false 都会渲染 只能控制对应的display来完成对应的显示隐藏（只渲染一次）作用范围：切换比较多的情况的下使用对应的v-show  切换少的情况使用v-if

    <div id="app">
        <!-- v-if支持Boolean类型,只会进入其中一个块 -->
        <p v-if="isRander">
            hello
        </p>
        <!-- v-else-if条件渲染 -->
        <p v-else-if="isRander">
            我是else if hello
        </p>
        <!-- v-else 在v-if的后面进入模块就不会进入elseif,不能放在v-if前面 -->
        <p v-else>
            world
        </p>
        <!-- v-show控制对应的显示通过对应的display来说控制对应显示和隐藏 默认是false隐藏 -->
        <p v-show=true>你好世界</p>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isRander:false,
                aa:"false"
            }
        })
    </script>

循环渲染  v-for （渲染对应的数组和对象）v-for 优先级大于v-if （v-for先执行的 v-if 后执行）

    <div id="app">
        <!-- 循环渲染对应的对象 v-for加给谁 谁就生成多个 -->
        <ul>
            <!-- "(值,键) in 对象 ":key = "键" 对应的v-for在2.5和2.6版本之后就有区别了,后面必须绑定key(内部机制要根据对应的key来排序) -->
            <li v-for="(item,key) in obj":key = "key" v-if="isRander">
                {{key}}:{{item}}
            </li>
        </ul>
        <!-- v-for的优先级大于v-if v-for先执行,再执行v-if,所以一般将v-if提到v-for的父级上去 -->
        <!-- 渲染数组 -->
        <ul>
            <!-- "(值,索引,数组) in 数组 ":key = "索引" 类似于foreach -->
            <li v-for="(item,index,array) in arr":key = "index">
                {{index}}:{{item}}
            </li>
        </ul>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                obj:{
                    name:"余海顺",
                    age:"22",
                    sex:"男"
                },
                arr:["a","b","c","d"],
                isRander:true
            }
        })
    </script>

属性绑定  v-bind（属性绑定）v-bind:属性名="data里面的属性值"   简写 :属性名=”data里面的数据值“

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- class = red 动态绑定 -->
        <!-- 绑定class属性 v-bind:属性名="data里面的数据" -->
        <div v-bind:class="classRed?'red':'blue'">hello</div>
        <!-- 绑定自定义属性 -->
        <div v-bind:index="index">world</div>
        <!-- 简写 :属性名="值" 常用写法 -->
        <div :index="index+2">你好世界</div>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                classRed:false,
                index:1
            }
        })
    </script>
</body>

<html>

事件绑定 （里面采用的就是观察者模式）

on派发事件 emit 执行事件 off 取消事件   v-on   v-on:事件名.事件修饰符="methods里面的方法"

@事件名.事件修饰符=“methods里面的方法”   常用的事件修饰符 stop 阻止事件冒泡 prevent 阻止默认事件

    <div id="app">
        <!-- v-on:事件名.修饰符="methods里面的方法",建议带上括号,方便传参 -->
        <button v-on:click="handlerClick('你好世界')">按我</button>
        <div v-on:click="handlerClick(123)">
            123
        </div>
        <!-- 简写 @事件名.修饰符="methods里面的方法" -->
        <div @click="handlerClick('hello')">
            hello
            <!-- stop停止 stopPropagation 阻止冒泡 preventDefault 阻止默认事件 -->
            <button @click.stop="handlerClick('world')">阻止冒泡,阻止事件击穿</button>
            <!-- 如果需要阻止事件击穿并且还需要阻止,默认事件那就继续加点 -->
            <a href="http://www.baidu.com" @click.prevent.stop="handlerClick('百度')">百度</a>
        </div>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            // 存储对应的方法
            methods: {
                handlerClick(str){
                    console.log(str)
                }
            }
        })
    </script>

v-pre 跳过编译

v-cloak 没有编译完成不会显示

v-once 只显示第一次加载的值

    <div id="app">
        <!-- v-pre跳过编译 用于测试看源码 -->
        <p v-pre>
            {{message}}
        </p>
        <!-- v-cloak编译未完成不显示 -->
        <p v-cloak>
            {{message}}
        </p>
        <!-- v-once 只显示第一次渲染的值 -->
        <p v-once>
            {{message}}
        </p>
        <button @click="change()">改值</button>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                message:"hello"
            },
            methods: {
                change(){
                    // 这个里面的数据会自动去data里面寻找
                    this.message = "你好"
                }
            }
        })
    </script>

表单的双向绑定（当前的页面可以改变对应的数据 数据也可以改变对应的页面）v-model

    <div id="app">
        <input type="text" v-model="str">{{str}}
        <input type="checkbox" name="likeFood" id="" value="苹果" v-model="checkbox">
        <input type="checkbox" name="likeFood" id="" value="香蕉" v-model="checkbox">
        <input type="checkbox" name="likeFood" id="" value="荔枝" v-model="checkbox">
        <input type="checkbox" name="likeFood" id="" value="猕猴桃" v-model="checkbox">{{checkbox}}
        <input type="radio" name="liss" id="">
        <input type="radio" name="liss" id="">
        <select name="" id="" v-model="selected">
            <option value="a">1</option>
            <option value="b">2</option>
        </select>{{selected}}
        <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>{{text}}
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str:"message",
                checkbox:[],
                selected:"",
                text:"",
            },
            methods: {

            }
        })
    </script>