Vue快速入门

Vue快速入门

一、Vue简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

二、第一个Vue程序

（1）导入开发版本的Vue.js

 <!-- 导入开发版本的 Vue.js  -->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

（2）创建Vue实例对象，设置el属性和data属性

 // 创建Vue 实例 
        var app = new Vue({
            // 设置el属性和data属性
            el: '#app',
            data:{
                message:'Hello Vue!'
            }
        })

（3）使用简洁的模板语法把数据渲染到页面上

二、Vue的el挂载点

el是用来挂载Vue实例挂载的元素。

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

答：Vue会管理el挂载的元素以及内部的所有元素。

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

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

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

答：el可以设置其他标签，但是不可设置HTML标签和BODY

三、Vue的data数据对象

（1）Vue用得到的数据都定义在data中

（2）data中可以写复杂类型的数据

（3）渲染复杂类型数据时,遵守js的语法即可

四、Vue常见指令

（一）v-text

v-text指令（相当于原生js中的innerText）

用于将数据填充到标签中，作用于插值表达式类似。

 <div id="app">
        <!-- v-text 写法 -->
        <h2 v-text="English"></h2>
        <!-- 插值表达式 -->
        <h2>{{Chinese}}</h2>
    </div>
    <!-- 导入开发版本的 Vue.js -->
    <script  src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script>
        // 创建Vue 实例
        new Vue({
            // 设置el属性和data属性
            el:'#app',
            data() {
                return {
                    English:'How are you ?',
                    Chinese:'你好吗？'
                }
            },
        })
    </script>

（二）v-html

v-html指令(相当于原生js中的innerHTML)

v-html和v-text的区别

v-html的作用：

​ （1） v-html指令的作用是:设置元素的innerHTML

​ （2）内容中有html标签或元素会被解析为标签

v-text的作用

（1） v-text指令无论内容是什么,只会解析为文本

（2）解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
        <p v-html="message"></p>
   
        <p v-text="message"></p>
    </div>
     <!-- 导入开发版本的 Vue.js -->
     <script  src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
     <script>
        // 创建Vue 实例
        new Vue({
            el:'#app',
            data() {
                return {
                    message:'<a href="http://www.baidu.com">百度</a>'
                }
            },
        })
     </script>
     

（三）v-on基础

v-on为元素班绑定事件

语法：v-on:事件=“方法名”

v-on指令的特点

（1）事件名不需要写on
（2）指令可以简写为@
（3）绑定的方法定义在methods属性中
（4）方法内部通过this关键字可以访问定义在data中数据

div id="app">
<input type="button" value="事件绑定" v-on:click="sayHi">
<input type="button" value="事件绑定" @monseenter="sayHi"><input type="button" value="事件绑定" @dblclick="sayHi">
</div>
<script>
       
        new Vue({
            el:'#app',
           methods:{
			dolt:function(){
				alert('hi');
			}
		}
       })
     </script>