vue指令+vue组件+webpack打包+Vue的脚手架

1.绑定事件指令 v-on

<div id="app">
    {{num}}
    <button v-on:click="num++">事件一</button>
    <button @click="num++">事件二</button>
    <!--下面两种方法调用函数都可以-->
    <button @click="countSum">事件三</button>
    <button @click="countSum()">事件三</button>
    <button @click="say('打印一下吧')">事件四</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num+1;
            },
            say(msg){
              console.log(msg);
            }
        }
    })
</script>

2.计算属性

作用：可以代替复杂的表达式
比如：

<div id="app">
    以前转换为年月日的方法
    {{new Date(birthday).getFullYear()+
    "年"+new Date(birthday).getMonth()+"月"
    +new Date(birthday).getDay()+"日"}}<hr>
    使用计算属性<br>
    {{birth}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            birthday:1529032123201
        },computed:{
           birth(){
               const day=new Date(this.birthday);
               return day.getFullYear()+"年"+day.getMonth()+"月"+day.getDay()+"日";
           }

        }
    })
</script>

3.watch

作用：可以获取值的改变

<div id="app">

    <input type="text" v-model="msg">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        }, methods:{

        },
        watch:{
            //可以获取上次改变的值-- 记录日志 --用处不是很大
            msg(newVal,oldVal){
                console.log(newVal,oldVal);
            }
        }
    })
</script>

4.Vue组件

(1)以前组件: Component  --easyui 组件 datagrid tabs menu...panel,dialog

 Vue组件: 自定义的代码块或者自定义标签 <atag></atag>

(2)组件有什么用:
	a.可以反复使用
	b.完成一些功能

(3)vue里面组件分类
		全局组件:任意地方都可以使用,任意挂载的标签都使用 
		局部组件:只能在当前的挂载的标签里面的使用
vue组件是vue里面比较重要知识点

1.全局组件

div id="app">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<script>
    //全局组件
    Vue.component("mycomponet1",{
        template:"<h1>标题一</h1>"
    })
    var mycomponet2={
        template: "<h2>标题二</h2>"
    }
    Vue.component("mycomponet2",mycomponet2)
    new Vue({
        el:"#app"
    })
    new Vue({
        el:"#app1"
    })
</script>

2.局部组件

<div id="app">
    <mycomponent1></mycomponent1>
</div>
<div id="app1">
    <mycomponent1></mycomponent1>
</div>
<script>
    new Vue({
        el:"#app",
        components:{
            "mycomponent1":{
                template:"<h1>这是标题一</h1>"
            }
        }
    });
    new Vue({
        el:"#app1"
    });
</script>

3.组件里面模板的写法

1.写法一

<template id="mytemplate">
    <h1>写法二</h1>
</template>

new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>写法一</h2>"
            }
        }

2.写法二

<script type="text/template" id="mytemplate">
    <h1>写法二</h1>
</script>

 new Vue({
       el:"#app1",
       components:{
           "mycomponet1":{
               template:"#mytemplate"
           }
       }
   });

4.模板里面的数据必须是函数

<div id="app">
    <mycomponet1></mycomponet1>
    {{name}}
</div>

<template id="mytemplate">
    <form>
        {{name}}<input type="text">
    </form>
</template>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"孟子"
        },components:{
            "mycomponet1":{
                template:"#mytemplate",
                data: function () {
                    return{
                        name:"孔子"
                    }
                }
            }
        }
    })
</script>

5.路由

路由: 找路

路由器: 很多接口,通过接口 找到一台电脑

vue路由: 定位到一个组件 类似于

1.路由使用

(1)安装 路由

​ npm install vue-router

​ npm uninstall vue-router
(2)在页面引用vue-router.js文件

<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>

（3）使用

<div id="app">
<!--相当于<a href="">-->
    <router-link to="/">首页</router-link>
    <router-link to="/towPage">第二页</router-link>
    <router-link to="/treePage">第三页</router-link>
    <!--路由出口-->
    <router-view></router-view>

</div>
<script>
    //定义组件
    var index=Vue.component("index",{
        template:"<h1>欢迎来到首页</h1>"
    });
    var towPage=Vue.component("towPage",{
        template:"<h1>欢迎来到第二页</h1>"
    });
    var treePage=Vue.component("treePage",{
        template:"<h1>欢迎来到第三页</h1>"
    });
    //创建一个路由
    var router=new VueRouter({
        routes:[{
            path:"/",
            component:index
        },{
            path:"/towPage",
            component: towPage
        },{
            path:"/treePage",
            component:treePage
        }
        ]
    });
    //把路由器挂载到vue对象上面去
    new Vue({
        el:"#app",
        router:router
    })
</script>

6.webpack打包(了解)

把项目里面内容(js,css,img等)这些资料进行打包

1.为什么需要打包

(1)减少单页面内的衍生请求次数，提高网站效率

(2) 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
导入 导出

(3)可以进行代码混淆  提高安全性

2.webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分

析，然后将这些模块按照指定的规则生成对应的静态资源

3.使用webpack–打包js文件

(1)下载安装

​ npm install -g webpack

​ npm install -g webpack-cli

(2)创建两个js文件
a.js

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

console.log(a);
console.log(b);

b.js

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

执行命令:

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

4.css打包

步骤一：

npm install style-loader --save-dev
npm install css-loader --save-dev

步骤二：
a.js引入

require("../css/index.css")

步骤三：

在webpack.config.js文件引入下面代码

var path = require("path");
module.exports = {
    entry: './js/a.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            }
        ]
    }
}

步骤四：打包：
在Terminal输入:

webpack

5.热部署

把前端内容放入服务里面运行
具体步骤：略。。。。（因为做失败了，而且后面的脚手架完美的实现了这个功能）

7.Vue的脚手架

1.使用脚手架

(1) 安装脚手架

npm install -g vue-cli

(2)创建一个项目

(3)执行 vue init webpack

​ 询问创建项目 yes

​ 询问vue-router yes

​ 后面的都是… no

​

(4)运行命令

​ npm run dev

2.修改一个界面

修改内容可以在App,vue这里修改