目录

一、计算属性

1、使用方法

 2.为什么要使用计算方法

二、侦听器

三、模板语法

1、模板语法

2、指令

v-text

v-html

v-show

v-if

v-elseif 、v-else

v-for

 v-on

 ​编辑

v-bind 

 ​编辑

v-model

 实例代码

 四、组件

1、组件的创建

2、代码演示

 五、脚手架的创建

1、官方文档

​编辑 

2、起步

 ​编辑

3、检查

 4、创建一个项目

4.1 黑窗口的交互式

​编辑

4.2 图形化界面的创建

五、简单的vue，前端的增删改查 

---

一、计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

通俗的说就是：修改data的值 

1、使用方法

两种表示

第一种：

 //计算属性
            computed: {
                messageComputed: function() {
                    console.info("computed");
                    var m = this.message;
                    for (var i = 0; i < ids.length; i++) {
                        m += ids[i];
                    }
                    return m;
                }

然后直接访问即可

第二种

使用get set 方法  默认是使用get方法的，只有使用

app.messageComputed2 ="admin" 改变的时候才会执行set方法

  //默认是get 的  设置     
                //app.messageComputed2 = 'admin'  当进行修改的时候才能调用set的方法
                messageComputed2: {
                    get: function() {
                        return this.message;
                    },
                    set: function() {
                        var m = this.message;
                        for (var i = 0; i < ids.length; i++) {
                            m += ids[i];
                        }
                        this.message = m;
                    }
                }

 2.为什么要使用计算方法

大家可以方法，我么通过methods的方法也可以实现data中数据值的修改，因此为什么要使用计算方法呢？

划重点：计算方法是可以使用缓存的，如果值已经存在，不执行方法直接使用缓存，而方法是不会使用缓存的，每次必须调用方法 

二、侦听器

监听数据的变化，当数据发生变化，监听器就会被触发

 //侦听器  
            watch: {
                //key是要监听的属性
                //当message发生变化的时候  ---就会调用
                //参数1 变化后的数据的内容
                //参数2 变化前的数据的内容
                message: function(newVal, oldVal) {
                    console.info("message 发生变化了")
                    console.info("message的old:" + oldVal)
                    console.info("message的new:" + newVal)
                    if (newVal == 'hello vue1') {
                        this.status = true
                    } else {
                        this.status = false
                    }
                }
            }

这样设置完毕后，当data中的message发生改变的时候就会执行这个方法

三、模板语法

1、模板语法

{{}}  可以调用一些方法  例如： {{ message.split(' ').reverse().join(' ') }}

但是{{}} 里面写的如果是html标签是无法解析的 

这里指定就可以用来解析标签

2、指令

以为v-开头的指令

v-text

相当于 {{}}，只能设置文本  

v-html

如果有html标签的话会被解析

v-show

等于js的show（）方法 ，将隐藏的对象显示

这个指定可以根据值的不同进行改变  如果为true为显示  false为隐藏

v-if

选择结构 

v-elseif 、v-else

一般跟v-if进行配合使用

v-for

循环遍历

            <tr v-for="(user,index) in users">
                <td>{{index+1}}td>
                <td>{{user.username}}td>
                <td v-text="user.pwd">td>
            tr>
 
 **
 
​            
for="(item,key) in user">{{key}}:{{item}}