Vue学习概要

Vue总结

1.环境准备

1.1 安装node.js

安装完成Node自带了NPM.

升级指令：npm install npm@latest -g

1.2 idea里面安装 nodejs的插件：

1.3Npm常用命令

初始化：npm init -y(跳过)

全局安装(所有项目都能用)

​ npm install -g vue

​ npm -g root 查看安装的全局路径

局部安装(当前项目使用)

npm install/i vue

卸载模块：npm uninstall vue

更新模块：npm update vue

运行工程：npm run dev/test/online --后面配置脚手架使用

编译工程：npm run build

2.ECMAScript6重要语法

//1.let 块级
for(let i = 0;i < 10;i++){
     console.debug(i);
}

//2.const 常量不能被修改
const c = 18;
console.log(c);
//c = 20;

 //3.解构表达式
//数组解构
 let arr=[1,2,3];
 let [a1,b1,c1]=arr;
 console.debug(a1,b1,c1);*/

//对象解构
 let user={
     name:"三三",
     age:18
 }
 let {name,age}=user;
 console.debug(name,age);

//4.箭头函数
 let user={
     name:"九儿",
     age:19,
     eat:function (food) {
         console.debug("吃"+food);
     },
     hobby:()=>console.debug("爱好吃鸡"),
     hobby2(){
         console.debug("爱好打枪")
     }
 }
 user.eat("回锅肉");
 user.hobby();
 user.hobby2();

//5.promise异步编程  相当于Ajax的$.get(url,data,function(data){})
const promise = new Promise((resolve, reject) => {
    const num = Math.random();
    if (num>0.5){resolve("大数"+num)}
    if (num<0.5){reject("小数"+num)}
});
promise.then(function (msg) {
    console.debug(msg);
})
promise.catch(function (msg) {
    console.debug(msg);
})

3.Vue

3.1 挂载

new Vue({
        el:"#myDiv",
        data:{
           msg:"xxxxx"
        }
    });
    new Vue({
        el:".myDiv1",
        data:{
            msg1:"ttttt"
        }
    })

3.2 data的写法

let app = new Vue({
    el:"#myVue",
    data:{
        msg:"Vue",
        hobby:["吃饭","睡觉","打豆豆"],
        person:{
            name:"八万",
            eat:(food)=>console.log("喜欢吃"+food)
        }
    }
});

3.3 methods

var app = new Vue({
    el:"#myVue",
    data:{
        msg:"vue的方法"
    } ,
    methods:{
        eat:function (food) {
             console.debug("吃"+food);
        },
        play:(someth)=>console.debug("玩"+someth),
        say(){
            console.debug("说段相声");
        }
    }
 });

3.4 vue生命周期，钩子函数

created(){
    console.debug("我出生了,创建对象");
},
mounted() {
    console.debug("等页面加载完我再执行好了！");
}

3.5 vue的双向绑定

<div id="myVue">
    <input type="text" v-model="msg" v-on:change="changVal"/><br/>
    {{msg}}
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"vue的双向绑定"

       } ,
       methods:{
           changVal:()=>{
              alert(app.msg);
          }
       }

   });
</script>

3.5 vue的表达式

<div id="myVue">
    <h1>{{msg}}</h1>
    <!--运算-->
    <h1>{{5+5}}</h1>
    <h1>{{5+"5"}}</h1>
    <h1>{{5+"v5"}}</h1>
    <h1>{{"5"+"5"}}</h1>
    <h1>{{5-5}}</h1>
    <h1>{{5-"5"}}</h1>
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <h1>{{5*"5"}}</h1>
    <!--三目-->
    <h1>{{show?"yes":"no"}}</h1>
    <!--字符串-->
    <h1>{{"作者尤雨溪"}}</h1>
    <h1>{{"作者尤雨溪".length}}</h1>
    <!--substr(开始下标，截取长度)-->
    <h1>{{"作者尤雨溪".substr(2,3)}}</h1>
    <!--substring(开始下标，结束下标)-->
    <h1>{{"作者尤雨溪".substring(2,5)}}</h1>

</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"vue的表达式",
           show:true
       }
   });
</script>

3.6 vue对象操作

<div id="myVue">
    <h1>{{msg}}</h1>
    <!--对象-->
    <h1>{{user}}</h1>
    {{JSON.stringify(user)}}
    <h1>{{user.name}}</h1>
    <h1>{{user.eat()}}</h1>
    <!--数组-->
    <h1>{{arr}}</h1>
    <h1>{{arr[0]}}</h1>
    <h1>{{arr.length}}</h1>
    <h1>{{arr.join("ssssssss")}}</h1>
</div>
<script>
    var user1={
        name:"王二狗",
        age:18,
        height:180,
        eat:()=>{
            console.debug("吃食物残渣");
        },
        toString(){
            return "姓名:"+this.name+",年龄:"+this.age;
        }
    }
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"vue对象操作",
           user:user1,
           arr:["赵云","吕布","曹操"]
       }
   });
</script>

3.7 vue重要指令

3.7.1 v-text/v-html

<div id="myVue">
    <span v-text="msg"></span>
    <span v-html="msg"></span>
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"<h1>html</h1>",
           arr:["赵云","吕布","曹操"]
       }
   });
</script>

3.7.2 v-for

<div id="myVue">
<!--        &lt;!&ndash;遍历数组&ndash;&gt;-->
<!--        <li v-for="person in persons">-->
<!--            {{person}}-->
<!--        </li>-->
<!--        &lt;!&ndash;遍历数组,带索引&ndash;&gt;-->
<!--       <li v-for="(person,index) in persons">-->
<!--            {{person}}&#45;&#45;{{index}}-->
<!--       </li>-->

<!--        &lt;!&ndash;遍历对象&ndash;&gt;-->
<!--        <li v-for="u in user">-->
<!--            {{u}}-->
<!--        </li>-->
<!--        &lt;!&ndash;遍历对象&ndash;&gt;-->
<!--        <li v-for="(u,key,index) in user">-->
<!--            {{u}}&#45;&#45;{{key}}&#45;&#45;{{index}}-->
<!--        </li>-->

        <table border="2">
            <tr>
                <td>name</td>
                <td>age</td>
                <td>height</td>
            </tr>
            <tr v-for="student in students">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.height}}</td>
            </tr>
        </table>
    </div>
    <script>
       var app = new Vue({
           el:"#myVue",
           data:{
               msg:"<h1>html</h1>",
               persons:["赵云","吕布","曹操"],
               user:{
                   name:"哈哈怪",
                   age:19,
                   height:180,
                   say:()=>{
                       console.debug("哈哈哈")
                   }
               },
               students:[{
                   name:"大帅",
                   age:20,
                   height:175
               },{
                   name:"少帅",
                   age:22,
                   height:178
               }]
           }
       });
    </script>

3.7.3 v-bind 绑定属性

<div id="myVue">
    <img v-bind:src="imgUrl"/>
    <img :src="imgUrl"/>
    <input v-bind="property">
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"<h1>html</h1>",
           imgUrl:"sss.jpg",
           property:{
               type:"text",
               name:"sss",
               value:"哈哈哈"
           }
       }
   });
</script>

3.7.4 v-model双向绑定

<div id="myVue">
    文本：
    <input type="text" v-model="inputVal">
    {{inputVal}}
    <hr>
    多选：
    <input type="checkbox" v-model="checkboxValue" value="打球"/>打球
    <input type="checkbox" v-model="checkboxValue" value="划水"/>划水
    <input type="checkbox" v-model="checkboxValue" value="举高"/>举高
    <hr>
    单选：
    <input type="radio" v-model="radioValue" value="男"/>爱好男
    <input type="radio" v-model="radioValue" value="女"/>爱好女
    <hr>
    文本域：
    <textarea v-model="textareaValue"></textarea>{{textareaValue}}
    <hr>
    下拉框：
    <select v-model="skills">
        <option value="php">php</option>
        <option value="java">java</option>
        <option value="h5">h5</option>
        <option value="test">测试</option>
    </select>
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           msg:"<h1>html</h1>",
           inputVal:"请你输入内容",
           checkboxValue:['划水'],
           radioValue:'女',
           textareaValue:"文本域xxxxxxx",
           skills:'java'
       }
   });
</script>

3.7.5 v-show

<div id="myVue">
    <div style="display: block">xxx</div>
    <!--控制display的属性-->
    <div v-show="show">
        true能看见我，false看不见
    </div>
    <div v-show="hidden">
        true能看见我，false看不见
    </div>
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           show:true,
           hidden:true,
           score:90
       }
   });
</script>

3.7.6 v-if-else

<div id="myVue">
    <div v-show="show">display属性，true和false都在页面</div>
    <div v-if="age<18">未成年好好学习</div>
    <div v-else-if="age>18 && age<60">成年了好好工作</div>
    <div v-else>有心无力</div>
</div>
<script>
   var app = new Vue({
       el:"#myVue",
       data:{
           show:true,
           age:65
       }
   });
</script>

4.Vue事件v-on

<div id="myVue">
   <button  v-on:click="num++">点击+1</button>
    {{num}}
    <button  @click="num++">点击+1</button>
    <hr>
    <button  v-on:click="say()">打招呼</button>
    <button  @click="say1('您今天吃了吗？')">打招呼</button>
</div>
<script>
    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"<h1>html</h1>",
            num:1
        },
        methods:{
            say(){
                alert("你好")
            },
            say1:(words)=>alert(words)
        }
    });
</script>

5.Vue计算属性computed

<div id="myVue">
    {{new Date(birthday).getFullYear()+"年"+(new Date(birthday).getMonth()+1)+"月"+new Date(birthday).getDate()+"日"}}
    <hr>
    {{new Date().getTime()}}
    <hr>
    {{Date.now()}}
    <hr>
    {{birth}}
</div>
<script>
    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"<h1>html</h1>",
            birthday:1582254419067
        },
        computed:{
          birth(){
              const d = new Date(this.birthday);
              return d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
          }
        }
    });
</script>

6.Vue的watch监听

<!--watch监听，获取上一个值-->
<div id="myVue">
    <input v-model="msg">
    {{msg}}
</div>
<script>
    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"chenxin"
        },
        watch:{
            msg(newVal,oldVal){
                console.debug(newVal,oldVal);
            }
        }
    });
</script>

7.Vue的组件

7.1全局组件

<!--全局变量可在所有被挂载的标签中使用-->
<div id="myVue">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<hr>
<div id="myVue1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<script>
    /*方式一*/
    Vue.component("mycomponent1",{
        template :"<h1>全局组件1</h1>"
    });
    /*方式二*/
    var componentConfig = {
        template: "<h1>全局组件2</h1>"
    }
    Vue.component("mycomponent2",componentConfig);

    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"chenxin"
        }
    });
    var app1 = new Vue({
        el:"#myVue1",
        data:{
            msg:"chenxin"
        }
    });

7.2 局部组件

<!--局部组件只能在所挂载的标签中使用-->
<div id="myVue">
    <component1></component1>
    <component2></component2>
</div>
<hr>
<script>
    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"chenxin"
        },
        components:{
            component1: {
                template:"<h1>局部组件1</h1>"
            },
            component2: {
                template:"<h1>局部组件2</h1>"
            }
        }
    });
</script>

7.3.template的两种写法

<!-template||script-->
<div id="myVue">
    <component1></component1>
    <component2></component2>
</div>
<template id="myTemplate">
    <h1>这是一个template</h1>
</template>
<script type="text/template" id="myTemplate2">
    <h1>这是template2</h1>
</script>
<hr>
<script>
    var app = new Vue({
        el:"#myVue",
        data:{
            msg:"chenxin"
        },
        components:{
            component1: {
                template:"#myTemplate"
            },
            component2: {
                template:"#myTemplate2"
            }
        }
    });
</script>

8.vue-router路由

<div id="app">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
    <router-link to="/product">公司产品</router-link>
    <router-link to="/about">关于我们</router-link>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    //>>1.定义首页:组件
    var index = Vue.component("index", {
        template : "<h1>首页</h1>"
    });
    //>>2.公司产品：组件
    var product = Vue.component("product", {
        template : "<h1>公司产品</h1>"
    });
    //>>3.关于我们：组件
    var about = Vue.component("about", {
        template : "<h1>关于我们</h1>"
    });

    //>>4.创建一个路由：
    var router = new VueRouter({
        routes : [ {
            path : "/",//路由地址
            component : index
            //路由对应的资源
        }, {
            path : "/about",//路由地址
            component : about
            //路由对应的资源
        }, {
            path : "/product",
            component : product
        }, ]
    });

    //创建一个vue对象
    var app = new Vue({
        el : "#app",//挂载在app上
        router : router
//使用路由对象
    });
</script>

9.vue-cli

vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板。

9.1命令：

安装命令：npm install -g vue-cli

快速创建webpack项目：vue init webpack

运行：npm run dev

npm run build 打包可以在服务器运行

终止快捷键：ctrl+c

淘宝镜像：

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install vue