Vue简介

一、定位

　　1、vue.js：是用于web前端开发的工具库，定位是用来控制数据和完成特效。

　　2、jQuery：定位则是用来获取元素和完成特效。

二、创建vue对象及必有参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">  <!-- vue对象的操作范围只在该标签内部 -->
    <span>{{name}}</span><span>的年龄是</span><span>{{age}}</span>
</div>
<!-- 编辑vue对象 -->
<script>
    var vueObj = new Vue({  // 新建一个vue对象
        el: '#id_div1',  // el属性用来设置vue对象可操作的标签范围，一般是id选择器
        data: {  // data属性用于存放vue对象要操作标签的具体数据
            name: 'tom',
            age: 18,
        }
    })
</script>
</body>
</html>

View Code

三、vue.js的MVVM模式 --- model view viewmodel

　　1、model：指的是vue对象的data属性里面的具体数据。

　　2、view：指的是数据在html页面中显示。

　　3、viewmodel：指的是vue对象，它是vue.js的核心，连接着view和model，保证了数据和显示的一致性，正是通过vue对象完成了数据在页面中的自动显示。

四、vue对象的属性

　　1、console.log(vueObj.$el)：该vue对象的操作范围。

　　2、console.log(vueObj.$data)：该vue对象可显示到页面中的数据。

　　3、console.log(vueObj.$data.name)：访问具体某个数据。

　　4、console.log(vueObj.name)：效果同上。

五、显示数据

　　1、{{ }}：只可用于闭合标签，不仅可以显示纯文本，还可以填入符合js语法的表达式。

　　2、v-model：在表单输入框中给标签加上v-model属性来控制数据显示。

　　3、v-html：给闭合标签加上v-html属性来插入html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="id_div1">
    <p>{{age*10}}</p>
    <p>{{age<10? type1:type2}}</p>
    <p>{{name.toUpperCase()}}</p>
    <p><input type="text" v-model="name"></p>
    <p v-html="tag"></p>
</div>

<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            name: 'tom',
            age: 18,
            tag: '<h1>标题</h1>',
            type1:'儿童',
            type2:'少年'
        }
    })
</script>
</body>
</html>

View Code