vue提升

1.vue的绑定事件v-on

<div id="app">
        {{age}}
        <input type="button" value="按钮" v-on:click="age++">
        <input type="button" value="按钮" @click="age++">

        <input type="button" value="按钮" v-on:click="add">
        <input type="button" value="按钮" @click="add">
        <input type="button" value="按钮" v-on:click="say(111)">

    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:15
            },
            methods:{
                add(){
                    this.age++;
                },
                say(str){
                    console.log(str);
                }
            }
        })
    </script>

2.计算属性computed

<div id="app">
        {{birth}}

    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:15,
                birthday:1529032123201
            },
           computed:{
                birth(){
                    return new Date(this.birthday).getFullYear()+"年"+
                        new Date(this.birthday).getMonth()+"月"+
                        new Date(this.birthday).getDay()+"日"
                }
           }
        })
    </script>

3.监听watch

注意：监听哪个变量，watch里面的方法名称就是哪个

<div id="app">
        <input type="text" v-model="message">
        <input type="text" v-model="msg">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"123",
                msg:"aaa"

            },
           watch:{
                message(newVal,oldVal){
                    console.log("messageNew:"+newVal);
                    console.log("messageOld:"+oldVal);
                },
                msg(newVal,oldVal){
                    console.log("msgNew:"+newVal);
                    console.log("msgOld:"+oldVal);
                }
           }
        })
    </script>

4.全局组件

<div id="app">
        <component1></component1>
        <component2></component2>
    </div>
    <script>
        Vue.component("component1",{
            template:"<h1>模板1</h1>"
        });
       var cmp = {
            template:"<h1>模板2</h1>"
        }
        Vue.component("component2",cmp);
        var app = new Vue({
            el:"#app",
            data:{
                message:"123"
            }
        })
    </script>

5.局部组件

<div id="app">
        <component1></component1>
    </div>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:"123"
            },
            components:{
                "component1":{
                    template:"<h1>局部组件</h1>"
                }
            }

        })
    </script>

全局组件和局部组件就和 全局变量，局部变量的关系类似

6.组件模板

注意： (1)如果要使用模板里面的数据,必须是函数的形式
(2)模板里面如果有多个标签,必须包含在一个根标签里面

 <div id="app">
        <component1></component1>
    </div>
    <template id="mytemplete">
        <div>
            <span>11111111</span>
            <form>
                {{name}}<input type="text">
            </form>
        </div>
    </template>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"123"
            },
            components:{
                "component1":{
                    template:"#mytemplete",
                    data(){
                        return {name:"用户名"};
                    }
                }
            }
        })
    </script>

7.路由

注意：router-view相当于用来显示页面的占位符，必须加，不然不能显示相应的界面

 <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/middle">中间</router-link>
        <router-link to="/right">右边</router-link>
        <router-view></router-view>
    </div>
    <script>
        var index = Vue.component("index",{
            template:"<h1>首页</h1>"
        })
        var md = Vue.component("middle",{
            template:"<h1>中间</h1>"
        })
        var rt = Vue.component("right",{
            template:"<h1>右边</h1>"
        })

        var routers = new VueRouter({
            routes:[{
                path:"/",
                component:index
            },{
                    path:"/middle",
                    component:md
                },{
                path:"/right",
                component:rt
            }]
        })
        var app = new Vue({
            el:"#app",
            data:{
                message:"123"
            },
            router:routers
        })
    </script>

8.webpack打包

定义：将许多碎小文件打包成一个整体
作用：
(1) 减少页面对于资源的请求,提高效率
(2)可以降低版本,Es6–>Es5为了兼容浏览器
(3)将代码打包的同时进行混淆，提高代码的安全性。
使用步骤：
(1)安装
npm install -g webpack
npm install -g webpack-cli
(2)创建一些代码
a.js

var a = "a模块";
var b = require('./b.js');
console.log(b);

b.js

define(function () {
    var b = "b模块";
    return b;
});

(3)运行打包的命令

webpack src/a.js -o dist/bundle.js

(4)创建一个html页面 ,引入bundle.js文件

9.把项目放到服务器

(1) 安装
npm install webpack-dev-server --save-dev
npm install webpack --save-dev
(2)在package.json中配置script

  "scripts": {
     "dev": "webpack-dev-server  --inline --progress --config ./webpack.config.js"  
  }

(3) package.json版本

 "devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

(4) 在终端运行 npm run dev
(5)访问 默认端口 是 localhost:8080

10.脚手架搭建（vue3.0）

(1)npm install -g @vue/cli
(2)vue create hello-world
(3)选中 VueProject(第二个)
(4) cd hello-world
​ （yarn serve – 运行
​ yarn build – 编译(额外生成一些文件)）
(5) npm run serve --运行