Vue — 入门基础

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

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

      <script src="vue.js"></script>

1.基本语法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery.js" ></script>
    <script type="text/javascript" src="vue.js" ></script>
</head>
<body>
    <div id="app">
        {{ message }}
        <br>
        {{ 3+1 }}
        <!-- v-text -->
        <div v-text="vtext"></div>
        <!-- html可以解析标签-->
        <div v-html="vhtml"></div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"我是测试数据",
            vtext:"我是text文本",
            vhtml:"<h1>我是html文本</h1>"
        }
    })
</script>
</html>

运行结果

显示message数据.png

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

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

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

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

   <div v-text="vtext"></div>
   <div v-html="vhtml"></div>

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

  <div v-if="is_show">显示了div</div>
  <p v-if="num==1">num==1</p>
  <p v-else-if="num==2">num==2</p>
  <p v-else>num等于其他</p>

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

    1.通过关键字”in”来循环：v-for="(v,k) in mydata"
    <!--索引是为了在操作数据后，定位找到数据-->
      <li v-for="(v,k) in arr">
          姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
     </li>
    2.通过关键字“of”来循环：
     <li v-for="(v,k) of arr">
            姓名是{{v.name}},年龄是{{v.age}}索引是{{k}}
    </li>
    <!--只有对象有第三个参数index,数组没有-->
    <li v-for="(v,k,index) in obj">
         键名是{{k}},键值是{{v}}索引是{{index}}
    </li>

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

      <button v-on:click="sub">vue点击{{message}}</button>
      <script>
           new Vue({
                el:"#app",
                data:{
                    message:"<h1>你好 hello word</h1>",
                     judge:false,
                    str:"没有值",
                    is_show:true,
                    num:2,
                    //不能检测数组的改变，可以改变检测对象
                    arr:[{name:"张三",age:19},{name:"李四",age:12},{name:"王五",age:13}],
                    obj:{name:"张三",age:19},
                },
               methods:{
                    sub(){
                          this.message = "你好世界";
                      }
                }
        })
    </script>

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

//如果idName为true，则该div的id名为myid否则没有，注意字符串问题，外面是双引号，里面需要是单引号
<div v-bind:id="idName?'myid':' '">哈哈</div>

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

爱好： <input type="checkbox" v-model="users.hobby" value="篮球">篮球
       <input type="checkbox" v-model="users.hobby" value="足球">足球
       <input type="checkbox" v-model="users.hobby" value="羽毛球">羽毛球
<script>
new Vue({
        el:"#app",
        data:{
            message:"我是message数据",
            users:{
                username:"",
                sex:"男",
                // hobby需要是一个数组
                hobby:[],
                city:"上海"
            }
        },
})
</script>

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

<a v-on:click.prevent="test" href="http://www.baidu.com">点击到百度</a>

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

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

html代码
<!--计算属性computed,反转字符串-->
在input框里面输入的字符，在外面会反转显示
反转字符串 <input type="text" v-model="reverseStr">{{ myreverseStr }}
js代码
computed:{
    nameReverse:function () {
        return this.reverseStr.split("").reverse().join("");
    }
}

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

     <!--计算属性computed,反转字符串-->
      反转字符串 <input type="text" v-model="reverseStr">{{ 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监控 <input type="text" v-model="watchstr">{{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:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Js:
data: {
  activeColor: 'red',
  fontSize: 30
}

(2) .style 数组语法

HTML:
 <!--动态样式一定要是对象-->
<div :style="[style1,style2]"></div>
Js:
data:{
            style1:{width:"100px",height:"50px"},
            style2:{background:"green"},
}

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

  <!--key值的运用-->
        <button @click="is_show=!is_show">点击我切换姓名/年龄</button><br>
        <template v-if="is_show">
            <!--没有加Key  还是只读取之前的节点，没变input框，只改了placeholder-->
            <!--加上key唯一标识符，input框切换了-->
            姓名：<input type="text" placeholder="请输入姓名" key="1"><br>
        </template>
        <template v-else>
            年龄：<input type="text" placeholder="请输入年龄" key="2">
        </template>

5. 输入表单修饰符

        lazy : 相当于change事件
        姓名: <input type="text" v-model.lazy="mytext">{{ mytext }}
        number 过滤只能是数字，但是一开始必须是数组
        姓名: <input type="text" v-model.number="mytext1">{{ mytext1 }}
        trim去首位空格
        姓名: <input type="text" v-model.trim="mytext1">{{ mytext1 }}
        多个修饰符连用
        姓名: <input type="text" v-model.trim.lazy="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:
<!--ref拿节点-->
     <div class="mydiv" ref="myel">
            我的div
     </div>
     <div class="mydiv" ref="myel">
            我的div
    </div>
<!--myfn加了括号myfn()，就没有默认的event-->
<!--解决方法 $event  1是传的参数-->
<button @click="myfn($event,1)" >点击我触发函数</button>
js:
 methods:{
            myfn:function(event,str){
                console.log(event,str);
                var el =  this.$refs['myel'];
                console.log(el);
            },

9. ajax请求

html:
 <p v-for="(v,k) in productList">{{v.productName}}</p>
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