Vue基础知识

一、vue简介

vue是一套用于构建用户界面的渐进式javaScript框架

渐进式：自底向上，简单的可以仅引入核心库，复杂的可以引入丰富的插件

vue特点

1、采用组件化模式，提高代码复用率，且代码更好维护

2、声明式编码：提高代码复用率，开发人员不需要直接操纵DOM(与之相对的命令式编码)

3、使用虚拟DOM+优秀的Diff算法，尽可能的复用DOM节点

二、vue基础

注意事项：

1、new一个Vue实例与容器是一一对应的关系，而且开发中只能有一个vue实例，但是会配合组件一起使用（也就是说可以定义多个组件）；

2、{{xxx}}中的xxx只能写表达式(是一个能够赋值给变量的数据)，且能够读取到data中的所有属性；

3、一旦data中的数据发生改变，页面用到该数据的地方也会随着变化；

模板语法：

1、插值语法

{{xxx}}：xxx为表达式

用于解析标签体中的内容（标签中包含的内容就是标签体，例：<h2>标签体<h2>）

<h1>插值语法</h1>
<h3>你好，{{name}}</h3>

<script>
        new Vue({
            el:"#root",
            data:{
                name:"李四",
                shool:{
                    name:"百度",
                    url:"http://www.baidu.com"
                }
            }
        })
</script>

2、指令语法

用于解析标签，在属性前面加上特殊标识，一般为v-???

 v-bind:

能够给任何一个标签属性动态绑定值，简写为:

v-bind:href="url"，这里的url接收的是一个表达式，在data中定义，例：url="www.baidu.com"

<h1>指令语法</h1>
<a v-bind:href="shool.url">点我去{{shool.name}}</a>
<!-- v-bind可以省略 -->
<a :href="shool.url">点我去{{shool.name}}</a>

<script>
        new Vue({
            el:"#root",
            data:{
                name:"李四",
                shool:{
                    name:"百度",
                    url:"http://www.baidu.com"
                }
            }
        })
</script>

页面显示：

 

数据绑定：

1、v-bind：单向数据绑定

data中数据的变化能够影响页面中用到该数据的地方

2、v-model：双向数据绑定

（1）、data中的数据和页面中用到data数据的地方能够互相影响，任何一方的改变都能够影响另一方的数据使其随之改变

（2）、只能用在表单类元素（因为表单类元素能够实现页面数据的改变，例如：input输入框），v-model实质上是在改变value的值

（3）、v-model:value可以简写为：v-model

<div id="root">
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model="name">
</div>
<script>
        new Vue({
            el:"#root",
            data:{
                name:"李四"
            }
        })
</script>

el的两种写法：

1、new Vue({el:"#root"})

刚开始就需要指定vue所绑定的容器

2、const v=new Vue({}) v.$mount("#root ")

可以在后面再指定vue所绑定的容器

const v=new Vue({
            el:"#root",  //第一种写法
            data:{
                name:"lijia"
            }
})
v.$mount("#root") //第二种写法

data的两种写法：

1、对象式

new Vue({data:{name:"李四"} })

new Vue({
            el:"#root",
            //data的第一种写法：对象式
            data:{
                name:"李四"
            }
        })

2、函数式

new Vue({ data:function(){ return{ name:"李四" } } })

new Vue({
            el:"#root",
            //data的第二种写法：函数式（推荐）
            // data:function(){ //:function可以删掉
            //     return{
            //         name:"lijia"
            //     }
            // }

            data(){ 
                return{
                    name:"lijia"
                }
            }
})