Vue进阶及Vue-cli搭建

1 Vue的事件注册

语法 :
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>
注意事项:
事件处理函数作为事件句柄的值不需要调用.

<body>
    <div id="app">
        {{num}}
        <br>
        <button v-on:click="num++">num++</button>
        <br/>
        <!--简写-->
        <button @click="num--">num--</button>

        <br/>
        <button v-on:click="add">num_add</button>
        <br/>
        <!--简写-->
        <button @click="add">num_add</button>
        <br/>
        <button @click="say('打篮球')">say</button>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            add(){
                this.num++;
            },
            say(msg){
                console.log("今天阳光明媚,我们一起去"+msg);
            }
        }
    })
</script>

2 Vue的计算属性

Vue中提供了计算属性,来替代复杂的表达式,计算属性本质是一个方法,但是必须有返回值。然后页面渲染时,可以把这个方法当成一个变量来使用,如:

<body>
    <div id="app">
        你的生日为:{{birth}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            //毫秒值
            birthday:1529032123652
        },
        computed:{
            //计算属性本质是一个方法,但是必须有返回值
            birth(){
                return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"+
                    new Date(this.birthday).getDate()+"日";
            }
        }
    })
</script>

3 Vue中的Watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

<body>
<div id="app">
    <input type="text" v-model="message">
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:''
        },
        watch:{
            message(newVal,oldVal){
                console.log("newVal:"+newVal);
                console.log("oldVal:"+oldVal);
            }
        }
    })
</script>

4 Vue中的组件

4.1 什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素标签,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
总的来说,组件是用来完成特定功能的一个自定义的HTML标签。

4.2 组件的作用

组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

4.3 组件的分类

4.3.1 全局组件

语法:
Vue.component(“自定义标签的名字”,{配置对象})
特点:

  • 全局组件可以在任何被挂着的标签中使用.
  • 全局组件的配置对象中必须包含template属性

注意事项:

  • template中的html必须在一个标签中. 仅且只能有一个根节点

应用场景:

  • 如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件
<body>
    <!--都能使用-->
    <div id="app1">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>

    <div id="app2">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>
</body>
<script>
    //第一种写法
    Vue.component("mycomponet1",{
        template:"<h1>这是我的全局组件1</h1>"
    });
    //第二种写法
    var componentConfig = {
        template:"<h1>这是我的全局组件2</h1>"
    }
    Vue.component("mycomponet2",componentConfig);

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

4.3.2 局部组件

  • 语法:
    var app = new Vue({
    el: “#app”,
    data: {},
    components : {
    “局部组件的名字1” : {组件的配置对象}
    “局部组件的名字2” : {组件的配置对象}
    }
    });
  • 特点:
    局部组件只能够在所挂载的标签中使用
<body>
    <div id="app1">
        <mycomponet></mycomponet>
    </div>
    <!--在app2中不能使用,会报错-->
    <div id="app2">
        <mycomponet></mycomponet>
    </div>
</body>
<script>

    var app1 = new Vue({
        el:"#app1",
        data:{
        },
        components:{
            "mycomponet":{
                template:"<h1>这是局部组件</h1>"
            }
        }
    });
    
    var app2 = new Vue({
        el:"#app2",
        data:{
        }
    })
</script>

4.4 几种写法

第一种写法:

<body>
    <div id="app1">
        <mycomponet></mycomponet>
    </div>
</body>
<script>
    //第一种写法
    var app1 = new Vue({
        el:"#app1",
        data:{
        },
        components:{
            "mycomponet":{
                template:"<h1>第一种写法</h1>"
            }
        }
    });
</script>

第二种写法:

<body>
    <div id="app1">
        <mycomponet></mycomponet>
    </div>
    <template id="mytemplate">
        <h1>第二种写法</h1>
    </template>
</body>
<script>
    var app1 = new Vue({
        el:"#app1",
        data:{
        },
        components:{
            "mycomponet":{
                template:"#mytemplate"
            }
        }
    });
</script>

第三种写法:

<body>
    <div id="app1">
        <mycomponet></mycomponet>
    </div>
</body>
<script type="text/template" id="mytemplate">
    <h1>第三种写法</h1>
</script>
<script>
	//第三种写法
    var app1 = new Vue({
        el:"#app1",
        data:{
        },
        components:{
            "mycomponet":{
                template:"#mytemplate"
            }
        }
    });
</script>

4.5 组件中的数据

组件中数据的定义
语法:
“组件的名字”:{
template: “”,
data : function(){
return {
键1:值1,
键2:值2
}
}
}
注意事项:

  • data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
  • 只能够在各自的组件模板中使用各自的组件中的data数据
  • Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

例子:

<body>
    <div id="app1">
        <mycomponet></mycomponet>
    </div>

    <template id="mytemplate">
        <div>
            <form>
                {{name}}:<input type="text" name="username">
            </form>
        </div>
    </template>
</body>
<script>
    var templateConfig = {
        template:"#mytemplate",
        data(){
            return {name:'用户名'}
        }
    }
    
    Vue.component("mycomponet",templateConfig);

    var app1 = new Vue({
        el:"#app1",
        data:{
        }
    });

</script>

5 Vue中的路由

5.1 什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射,通过一个路径的url地址,可以唯一找到一个资源。路由不包含在vue中,是一个插件,需要单独下载。

  • 官方地址:https://router.vuejs.org/zh/
  • vue-router.js网络地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

5.2 路由的使用

步骤:
(1)安装
在Terminal命令窗口输入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)代码如下:

<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/product">公司产品</router-link>
        <router-link to="/about">关于我们</router-link>
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</body>
<script>
    var index = Vue.component("index",{
        template:"<h1>欢迎来到我们公司的官网</h1>"
    });
    var product = Vue.component("product",{
        template:"<h1>这些是我们公司的产品</h1>"
    });
    var about = Vue.component("about",{
        template:"<h1>联系电话:12345678</h1>"
    });

    var router = new VueRouter({
       routes:[{
           //路由地址
            path:"/",
           //路由对应的资源
           component:index
       },{
           path:"/product",
           component:product
       },{
           path:"/about",
           component:about
       }]
    });

    //把路由挂载到标签上面
    var app =   new Vue({
        el:"#app",
        data:{

        },
        router:router
    });
</script>

6 webpack打包

6.1 为什么需要打包

  • 将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
  • 将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆,提高代码的安全性。

6.2 什么是webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析,然后将这些模块按照指定的规则生成对应的静态资源。
在这里插入图片描述

6.3 webpack的使用

6.3.1 webpack的安装

本地安装

  • npm install webpack --save-dev
  • npm install webpack-cli --save-dev

全局安装

  • npm install -g webpack
  • npm install -g webpack-cli

6.3.2 webpack入门使用

  • 创建一些就是代码,用webpack来打包:

a.js

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

b.js

define(function () {
    var b = "b模块";
    return b;
});
  • 在Terminal窗口输入打包指令,对a.js进行打包
    webpack src/a.js -o dist/bundle.js

  • 创建一个html,引入打包生成的bundle.js文件,然后查看网页控制台。

<script src="dist/bundle.js"></script>

6.3.3 js打包 - 配置文件

上面我们每次在打包的时候,都要输入 webpack src/a.js -o dist/bundle.js 这个命令,比较麻烦,所以我们可以按照下面的方式,新建一个js文件,到时候打包的时候,只需要运行webpack 命令就可以进行打包.
webpack.config.js ,该文件与项目根处于同级目录

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

6.4 css加载

6.4.1 加载器loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活,或者通过 webpack 配置中的正则表达式来自动应用 -

  • vue-loader 转换vue组件 *.vue
  • css-loader 加载css文件
  • babel-loader 加载 ES2015+ 代码,然后使用 Babel 转译为 ES5

6.4.2 使用

(1)下载安装css加载器

  • 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命令,会生成一个distf文件下,里面有一个bundle.js这个文件
(5)新建一个html引入bundle.js这个文件

6.5 热更新web服务器

刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件,可以帮我们运行一个web服务.
(1)安装插件:npm install webpack-dev-server --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)在终端Terminal输入 npm run dev
(5)进行访问 默认端口是localhost:8080

7 Vue-cli(Vue脚手架)搭建

7.1 简介

在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli
使用它能快速的构建一个web工程模板。
官网:https://github.com/vuejs/vue-cli

7.2 搭建步骤

(1)npm init -y 项目初始化
(2)npm instal vue 安装vue
(3)npm install -g @vue/cli 全局安装vue脚手架
(4)vue create hello-world 创建一个hello-world文件夹
(5)选中VueProject
(6)cd hello-world 路径切换到hello-world文件夹下
(7)npm run serve 运行
(8)访问http://localhost:8080/App.vue
如图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值