vue进阶

1 vue的绑定事件(掌握)

v-on 绑定事件

 <div id="app">
        {{num}}s
        <button v-on:click="num++">按钮1</button>
        <button @click="num++">按钮2</button>

        <button v-on:click="add">按钮3</button>
        <button @click="add">按钮4</button>

        <button @click="say('xxxx')">按钮5</button>

    </div>

2 计算属性(掌握)

computed:计算一些复杂的表达式

computed:{
            birth(){
                return new Date(this.birthday).getFullYear()+"年" +
                    new Date(this.birthday).getMonth()+"月"
            }
        }

3 watch 监听值的变化(掌握)

 watch:{
            //jiant
            message(newVal,oldVal){
                console.log("老值:"+oldVal);
                console.log("新值:"+newVal);
            }
        }

<input type="text" v-model="message">

4 vue里面组件(掌握)

4.1 组件是什么

组件: Component

组件是用来完成特定功能的一个自定义的HTML标签

作用:

​ (1)可以起到重复利用的效果

​ (2)在路由里面使用

4.2 组件的使用

组件分类:

​ 全局组件 : 各个地方地方都可以使用

​ 局部组件 : 只能自己能用 只能使用在当前挂载标签上面

(1)全局组件:

 <div id="app">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>

    <div id="app1">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>

<script>
      //注意事项：
      //template中的html必须在一个标签中. 仅且只能有一个根节点

      //定义全局组件
      Vue.component("mycomponent1",{
          template:"<h1>我是第一个全局组件</h1>"
      })
      var templateconfig = {
          template:"<h2>我是第二个全局组件</h2>"
      }
      Vue.component("mycomponent2",templateconfig)
      var app = new Vue({
          el:"#app"
      })

      var app2 = new Vue({
          el:"#app2",
      })
  </script>

(2)局部组件:

var app =   new Vue({
        el:"#app",
        data:{},
        components:{
            "mycomponet1":{
                template : "<h1>这是一个局部组件</h1>"
            }
        }
    });

(3)组件里面模板写法

     
      (1)直接在 组件写个template这个模块
         template : "<h1>这是一个局部组件</h1>"
      (2)
           <template id="mytemplate">
             <h1>template标签中的html1111111</h1>
             </template>
        在组件里面引用 template
         template : "#mytemplate"
       (3)
         <script type="text/template" id="mytemplate">
         <h1>template标签中的html</h1>
          </script>
		 在组件里面引用 template
         template : "#mytemplate"
      

(4)模板里面的数据使用函数 返回值

  <div id="app">
        <mycomponet1></mycomponet1>
    </div>
    <!-- 模板里面的内容 必须包含在一个根元素里面-->
    <template id="mytemplate">
        <div>
            <h1>xxxxxxxxxxxxxx</h1>
            <form>
                {{name1}}:<input type="text" name="username"/>
            </form>
        </div>
    </template>

<script>
         var mytemplateConfig = {
             template:"#mytemplate",
             data(){
                 return {name1:'用户名'}
             }
         }
         Vue.component("mycomponet1",mytemplateConfig);
         var app =   new Vue({
                el:"#app",
                data:{
                    message:'xxx'
                }
            });
</script>

5 路由 --router(掌握)

5.1 什么叫路由:

通过一个地址url, 去定位到一个组件 … 类似于导航作用

5.2 路由使用

步骤:

(1)先安装

​ npm install vue-router

(2)引入文件

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

(3)js代码

 //组件
    var index = Vue.component("index",{
        template:"<h1>首页</h1>"
    });
    var product = Vue.component("product",{
        template:"<h2>产品</h2>"
    });
    var about = Vue.component("about",{
        template:"<h1>关于</h1>"
    })
    //创建一个路由
    var router = new VueRouter({
        routes:[{//规则
            path:"/",//路由的路径
            component:index,//路由对应的资源
        },{
            path:"/product",
            component:product
        },{
            path:"/about",
            component:about
        }]
    })

    //把路由挂载在标签上
    var app = new Vue({
        el:"#app",
        router:router
    })

(4)在标签上面

<div id="app">
		//点击路径
        <router-link to="/">首页</router-link>
        <router-link to="/product">公司产品</router-link>
        <router-link to="/about">关于我们</router-link>
        <hr />
        //渲染模板 -- 渲染组件
        <router-view></router-view>
    </div>

6 webpack(了解)

6.1 webpack是什么

把所有的项目资源 打包成一些比较小的资源

6.2 为什么需要打包?

作用:

(1) 减少页面对于资源的请求,提高效率

(2)可以降低版本,Es6–>Es5为了兼容浏览器

(3)将代码打包的同时进行混淆，提高代码的安全性。

6.3 JS打包用法

(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文件

6.4 打包配置文件方式

在项目的根路径下面创建一个文件:

webpack.config.js

var path = require("path");
	module.exports = {
	entry: './src/a.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
}

//运行

webpack

6.5 css打包用法

(1)下载安装 css加载器

​ css-loader style-loader

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

(2) 配置webpack.config.js

const path = require('path');

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

(3) 在js文件里面引入css

var a ='aaa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);

(4)在终端 terminal运行 webpack

生成一个bundle.js这个文件

(5)在页面引入该文件bundle.js

7 前端项目放到服务器运行–(了解)

(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

8 脚手架搭建–掌握

(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 --运行

下来尝试vue-cli2.0版本