Vue加强

最新推荐文章于 2025-07-21 20:52:11 发布

原创最新推荐文章于 2025-07-21 20:52:11 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析Vue.js的关键特性，包括事件绑定、计算属性、Watch监听、组件使用及路由配置，涵盖从基本语法到高级应用的全面指南。

1.v-on绑定事件

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

<body>
    <div id="div1">
        {{num}}
        <button v-on:click="say">按钮1</button>
        <button @click="say">按钮2</button>
        <button v-on:click="num++">加一加一</button>
    </div>
</body>
<script>
    var vue1=new Vue({
        el:"#div1",
        data:{
            num:11
        },
        methods:{
            say(){
                console.log("我说我说")
            }
        }
    })
</script>

2.计算属性和watch

1.计算属性

<body>
    <div id="div1">
        {{birth}}
    </div>
</body>
<script>
    var vue1=new Vue({
        el:"#div1",
        data:{
            birthday:1429032123201
        },
        methods:{
            say(){
                console.log("我说我说")
            }
        },
        computed:{
            birth(){
                 return new Date(this.birthday).getFullYear()+"年" +
                    new Date(this.birthday).getMonth()+"月"+new Date(this.birthday).getDay()+"日"
            }
        }
    })
</script>

效果：
在这里插入图片描述

2.Watch监听值的变化

<body>
    <div id="div1">
        <input type="text" v-model="msg">
    </div>
</body>
<script>
    var vue1=new Vue({
        el:"#div1",
        data:{
            msg:"我我我我"
        },
        methods:{
        },
        watch:{
            msg(newVal,oldVal){
                console.log("老值:"+oldVal);
                console.log("新值:"+newVal);
            }
        }
    })
</script>

旧的值
新的值
在这里插入图片描述

3.vue组件

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

总结:
组件是用来完成特定功能的一个自定义的HTML标签
2、组件的作用
组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.
3、组件的分类
组件分为全局组件和局部组件
- 全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
- 局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效

3.1、全局组件

语法：
Vue.component(“自定义标签的名字”,{配置对象})
特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景：
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

<body>
<div id="div1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>

<div id="div2">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
</body>
<script>
    Vue.component("mycomponet1",{
        template:"<h1>第一个全局组件</h1>"
    });

    var templateConfig = {
        template:"<h2>第二个全局组件</h2>"
    }
    Vue.component("mycomponet2",templateConfig);

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

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

在这里插入图片描述

3.2、局部组件

语法：
var app = new Vue({
el: “#app”,
data: {},
components : {
“局部组件的名字1” : {组件的配置对象}
“局部组件的名字2” : {组件的配置对象}
}
});
特点：
局部组件只能够在所挂载的标签中使用

<body>
    <div id="div1">
        <mycomponet1></mycomponet1>
    </div>

    <div id="div2">
        <mycomponet1></mycomponet1>
    </div>
</body>
<script>
    var app =   new Vue({
        el:"#div1",
        data:{},
        components:{
            "mycomponet1":{
                template:
                "<h1>第一个全局组件</h1>"
            }
        }
    });
    var app1 =   new Vue({
        el:"#div2",
        data:{}
    });
</script>

在这里插入图片描述

3.3组件里面模板的写法

<body>
    <div id="div1">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>
    <template id="template1">
        <h3>这是第一个组件</h3>
    </template>
    <script type="text/template" id="template2">
        <h3>这是第二个组件</h3>
    </script>
</body>
<script>
    var app =   new Vue({
        el:"#div1",
        data:{},
        components:{
            "mycomponet1":{
                template:"#template1"
            },
            "mycomponet2":{
                template:"#template2"
            }
        }
    });
</script>

3.4 模板里面的数据使用函数返回值

3.4.1组件中数据的定义

语法:

"组件的名字":{
	template: "",
	data : function(){
		return {
		  键1:值1,
		  键2:值2
		}
	}
}

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

<body>
    <div id="div1">
        <mycomponet1></mycomponet1>
    </div>
    <template id="template1">
<!--        必须存在根元素包裹-->
        <div id="div2">
            {{msg}}:<input type="text" name="username">
        </div>
    </template>
</body>
<script>
    var app =   new Vue({
        el:"#div1",
        data:{},
        components:{
            "mycomponet1":{
                template:"#template1",
                data(){
                    return {msg:"用户名"}
                }
            },
        }
    });
</script>

4.路由——router

1、什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
2、如何使用
- 先安装
  npm install vue-router
- 引入文件

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

<body>
    <div id="div1">
        <router-link to="/index">首页</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>关于我们</h1>"
    })
    var router=new VueRouter({
        routes:[
            {
                path:"/index",
                component:index
            },
            {
                path:"/product",
                component:product
            },
            {
                path:"/about",
                component:about
            }
        ]
    })
    var app =   new Vue({
        el:"#div1",
        data:{},
        router:router
    });
</script>

5 webpack(了解)

5.1 webpack是什么

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

5.2 为什么需要打包?

作用:

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

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

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

5.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文件

5.4 打包配置文件方式

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

webpack.config.js

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

//运行

webpack

5.5 css打包用法

1.下载安装 css加载器

css-loader style-loader

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

1. 配置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

6.Vue-cli脚手架

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

(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