Vue — 入门基础

Vue简介：Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue官方下载地址：https://vuejs.org/v2/guide/installation.html
下载之后，我们只需要在需要用Vue的html页面引入vue.js即可

1.基本语法：

1、声明数据选入dom系统；
2、js中定义相关作用域
说明：只有在id=app中的节点才能获取Vue的数据，需要在script里new一个Vue对象,el是控制区域的id名，data中放的的定义的数据，文本插值用“{{}}”包裹，{{}}内可以是一些简单的逻辑计算,v开头的是指令.




    
    test
    
    


    
        {{ message }}
        

        {{ 3+1 }}

运行结果

显示message数据.png

1.1 表达式，文本插值：“{{}}”，表达式内可以用一些简单的逻辑

    {{ message }}
    {{ 3+1 }}

1.2 指令：指令以v作为开头；指令内部提供类js环境

(1) . v-text,v-html都是将数据显示

(2) . 条件：v-if是否显示（如果is_show为false，该div就不显示）

  显示了div
  num==1
  num==2
  num等于其他

(3) . 循环：v-for循环（可以循环数组，也可以循环对象）v-for比v-if的优先级更高

    1.通过关键字”in”来循环：v-for="(v,k) in mydata"
    
      
          姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
     
    2.通过关键字“of”来循环：
     
            姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
    
    
    
         键名是{{k}},键值是{{v}}索引是{{index}}

(4) . v-on来绑定事件(简写是用：“@”)：js里通过methods来定义事件（点击事件v-on:click）
通过this来获取到数据；

(5) . v-bind用来绑定属性（简写用“：”）

//如果idName为true，则该div的id名为myid否则没有，注意字符串问题，外面是双引号，里面需要是单引号
哈哈

(6) . v-model:实现数据的双向绑定,可以用于复选框，v-model的值就是value的值，mvvm框架 m:module，v:view，vm:viewModule

爱好： 篮球
       足球
       羽毛球

(7) . 修饰符：.prevent(阻止默认事件),a不会跳转

点击到百度

2.计算属性和观察者(表达式中可以放一些简单逻辑（设计的初衷是为了简单计算）但复杂的逻辑应该放在计算属性里面,而且计算属性可以实时动态更新)

注意：计算属性逻辑只执行一次，不需要触发的方法能放在计算属性里面，不要放在methods里面，计算属性有缓存比较节约性能，观察者实时监测，比较消耗性能。
(1) . computed

html代码

在input框里面输入的字符，在外面会反转显示
反转字符串 {{ myreverseStr }}
js代码
computed:{
    nameReverse:function () {
        return this.reverseStr.split("").reverse().join("");
    }
}

(2) . 计算属性提供geter/setter方法,默认会有get方法，当改变值的时候触发set方法：

     
      反转字符串 {{ myreverseStr }}
      computed:{
         myreverseStr:{
                get:function(){
                    return this.reverseStr.split("").reverse().join("");
                    console.log("执行了get方法");
                },
                set:function(value){
                    //改变自己需要过滤的属性，不能改变自身，会死循环
                    this.reverseStr = value;
                }
            }
      }

(3) . watch

html代码
在input框里面输入的字符，在外面会实时显示
 watch监控 {{watchstr}}
js代码
        watch:{
            watchstr:function(newValue,oldValue){
                console.log("新的值："+newValue);
                console.log("旧的值："+oldValue);
            }
        }

3.css和style绑定：v-bind

v-bind:class可以和普通的class来结合使用；里面提供类js的环境可以处理一些简单逻辑；
(1) . v-bind:style

HTML:

Js:
data: {
  activeColor: 'red',
  fontSize: 30
}

(2) .style 数组语法

HTML:
 

Js:
data:{
            style1:{width:"100px",height:"50px"},
            style2:{background:"green"},
}

4.Key属性:当切换相同dom节点时候，vue会复用节点，如果想让节点在渲染时候也被替换掉的话可以加上key属性；

5. 输入表单修饰符

        lazy : 相当于change事件
        姓名: {{ mytext }}
        number 过滤只能是数字，但是一开始必须是数组
        姓名: {{ mytext1 }}
        trim去首位空格
        姓名: {{ mytext1 }}
        多个修饰符连用
        姓名: {{ mytext1 }}

6. 数组改变html中不能更新，需要特殊设置

//解决方案一
//this.myarr是数组,0是下标，后面是新数据
Vue.set(this.myarr,0,{name:"set修改",age:1});
//解决方案二
在0下标删除一个，再添加一个
 this.myarr.splice(0,1,{name:"splice修改",age:1});

7. ref 获取节点 , event传参

html:

     
            我的div
     
     
            我的div
    



js:
 methods:{
            myfn:function(event,str){
                console.log(event,str);
                var el =  this.$refs['myel'];
                console.log(el);
            },

9. ajax请求

html:
 {{v.productName}}
js:
//生命周期 加载完了
data:function(){
            return{
                message:"我是message测试数据",
                productList:[]
            }
        },
   mounted(){
       $.ajax({
          type:"get",
          url:"data/cart.json",
          success:(res)=>{
               //拿不到this
               //箭头语法this穿透
               //数据优先，通过数据控制视图，没有数据控件，循环添加数据
                 console.log(res.result.productList);
                 this.productList = res.result.productList;
          }
     })
 },

总结

v-text 和 v-html区别

v-html可以解析标签

v-show和v-if区别：

V-show通过改变css来切换，开销更小，v-if是真正的渲染节点，性能消耗大；（操作频繁的用v-show,操作较少的用v-if）

keep-alive标签：会把相同的东西存入缓存

我的博客链接

更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io