Vue进阶及Vue-cli搭建

最新推荐文章于 2024-04-21 18:47:51 发布

唯有代码不会骗人

最新推荐文章于 2024-04-21 18:47:51 发布

阅读量185

点赞数

分类专栏： vue 文章标签： Vue Vue-cli Vue脚手架

本文链接：https://blog.csdn.net/weixin_44248000/article/details/103337820

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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
如图：
在这里插入图片描述