vue入门（上）

vue是什么？

vue是JavaScript渐进式框架，简化了dom操作，响应式数据驱动。

 

创建第一个vue程序：

1. 导入开发版本的vue（开发版本的vue.js包含了有帮助的命令行和警告。）
2. 创建一个vue实例，设置el和data属性
3. 使用简洁模板语法把数据渲染上

 

el是挂载点，el的范围：在el命中元素的内部。

el挂载可以使用类原则器也可以使用元素选择器等多个选择器，不过还是推荐用id选择器，因为id选择器是唯一的，后续再次声明会报错。

vue只能支持双标签，但不支持挂载到body上。

 

vue实例的作用范围：vue会管理el选项命中的元素及其内部的后代元素。

 

data数据对象：vue中用到的数据定义在data中，data可以写复杂类型的数据，渲染复杂类型数据时遵守语法即可。

 

v-text：

1. 指令是设置标签的的内容
2. 默认写法会替换原有的全部内容，使用插值表达式{{}}可以替换指定内容
3. v-text内部支持表达式

v-html：

1. v-html指令的作用是设置元素的innerhtml
2. 内容中含有html的结构会被解析为标签
3. 与v-text的不同之处是：v-text指令无论是什么都会被解析为文本

v-on：

1. v-on指令的作用是为元素绑定事件
2. 指令名不需要写on
3. 指令可以简写为@
4. 绑定事件的方法定义在methods属性中

 

实例内容1：加减实例

<div id="app">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:"1"
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert('到最大啦。')
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert('不能再减啦。')
                    }
                }
            }
        })
    </script>

实例1里的知识点：

1. 创建一个vue实例时：el（挂载点）、data(数据)、methods（方法）
2. v-on指令的作用是绑定事件，简化为@
3. 方法中通过this关键字获取data中的内容
4. v-text指令的作用是设置文本值，简写为{{}}

 

v-show：

1. v-show指令的作用是：根据真假切换元素的显示与隐藏
2. 原理是修改元素的display来实现显示和隐藏
3. 指令后面的元素都会解析为布尔值
4. 值为true时出现，值为false时隐藏

v-if：

1. v-if的作用是：根据表达式的真假切换元素的显示与隐藏
2. 本质上是通过操纵dom的元素来切换显示和隐藏状态
3. 表达式的值为true时，元素存在于dom树种；为false时，元素则从dom树中移除

 

v-if和v-show的区别：v-show是根据修改元素的display来实现隐藏和显示的，而v-if是根据表达式来切换，而且v-if的隐藏是从dom树中移除。