Vue基础知识

新建学习交流QQ群：1026682857 欢迎有兴趣的朋友 前来一起学习交流。

Vue特点

• JavaScript框架
• 简化DOM操作
• 响应式数据驱动

*官方站点：https://cn.vuejs.org

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

简单Vue的开发步骤

1. 导入Vue.js
2. 创建Vue实例对象，并设置属性
3. 使用插值表达式把数据渲染到页面上

el ： 挂载点

• Vue实例的作用范围
  作用范围在于el挂载元素的内部有效
• Vue可用的选择器
  可以使用ID选择器，class选择器，标签选择器，css选择器
• Vue可操作的DOM元素
  不可以对html元素和body元素进行挂载

data : 数据对象

• 可以支持基础数据类型，数组类型，对象类型
• 渲染复杂类型数据时 需要遵守js的语法

Vue指令

• v-text
  设置标签的文本值（textContent） 使用时原本的数据将被替换

    <div id="app">
        <h1>插值表达式</h1>
        <h2 v-text="message"></h2>
        <h2>{{message}}</h2>
        <h3> v-text="message" 与 \{\{message\}\} 功能类似 后者可用于界面级的字符拼接</h3>
        <hr>
        <h2 v-text="message"></h2>
        <h2>test {{message}} </h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "this is a message!"
            }
        });
    </script>

• v-html
  设置标签的innerHTML

    <div id="app">
        <p v-html="context"></p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                context: "<a href='#' > this is a URL </a>"
            }
        });
    </script>

• v-on
  设置事件处理函数 为元素绑定事件

<div id="app">
    <!--方式一-->
    <input type="button" @click="doClick">
    <!--方式二-->
    <input type="button" v-on:click="doClick">
    <!-- 两种方式效果和含义相同 -->
</div>

var app = new Vue({
    el:"#app#,
    methods:{
        doClick:function(){
            alert("this is a click Event Test");
        }
    }
});

• v-show
  根据表达式的值，切换元素的显示和隐藏 常用于广告、遮罩层等（通过设置display样式实现）
  true为显示 false为隐藏

<div id="app">
    <img src="..." v-show="true">
    <img src="..." v-show="isShow">
    
</div>

var app = new Vue({
    el:"#app",
    data:{
        isShow:false,
    }
});

• v-if
  根据表达式的值，切换元素的显示状态（直接操纵Dom元素）

<div id="app">
   <p v-if="true">显示一个p标签</p>
   <p v-if="false">不显示一个P标签</p>
   <p v-if="isShow" >动态绑定一个标签的显示状态</p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        isShow:false,
    }
});

• v-bind
  设置元素的属性（src 、title、class等）可应用三元表达式

<div id="app">
    <!--方式一-->
    <img v-bind:src="imgSrc" v-bind:title="title + '1234'">    
    <!--方式二-->
    <img :src="imgSrc" :title="title + '1234'">
    <!--两种方式效果相同-->
</div>

var app = new Vue({
    el:"#app",
    data:{
        imgSrc:"URL"
        title:"title"
    }
});

• v-for
  根据数据生成列表结构（响应式更新）

<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :title="item">
            序号{{index+1}}  内容{{item}}
        </li>
    </ul>
</div>

var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5]
    }
});

• v-on 自定义参数和事件修饰符

<div id="app">
    //自定义参数
    <input type="button" @click="doClick(arg1)" />
    //事件修饰符
    <input type="text" @keyup.enter="doMessage" />
</div>   

var app = new Vue({
    el:"#app",
    methods:{
        doClick:function(arg1){
            ...
        },
        doMessage:function(){
            ...
        },
    }
});

*详情见：https://cn.vuejs.org/v2/api/#v-on

• v-model
  获取和设置表单元素的值（双向绑定）

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

var app = new Vue({
    el: "#app",
    data:{
        message:"test",
    }
});