vue加强

最新推荐文章于 2023-08-13 21:39:25 发布

脚板心

最新推荐文章于 2023-08-13 21:39:25 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/weixin_45546279/article/details/103379122

版权

一、v-on 绑定事件

语法 :
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签>

<div id="app">
    {{num}}
    <button v-on:click="num++">按钮1</button>
    <button @click="num++">按钮2</button>
    <br/>
    <button v-on:click="add">按钮3</button>
    <button v-on:click="say('蔡徐坤')">按钮4</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            add(){
                this.num++;
            },
            say(msg){
                console.log("打印一下"+msg);
            }
        }
    })
</script>

二、计算属性和watch

2.1、计算属性

<body>
<div id="app">
    {{birth}}
    <input type="text" v-model="message">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1529032345671,
            message:"生日"
        },
        computed:{
            birth(){
                return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"
                +new Date(this.birthday).getDay()+"日"+new Date(this.birthday).getHours()+"时"
                +new Date(this.birthday).getSeconds()+new Date(this.birthday).getTimezoneOffset()
            }
        }
    })
</script>

2.2、watch 监听值的变化

<div id="app">
    <input type="text" v-model="message">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"空的"
        },
        watch:{
            message(mewVal,lodVal){
                console.log(mewVal)
                console.log(lodVal)
            }
        }
    })
</script>

三、组件

组件是用来完成特定功能的一个自定义的HTML标签
作用:
(1)可以起到重复利用的效果
(2)在路由里面使用

3.1、全局组件

各个地方地方都可以使用

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<script>
    Vue.component("mycomponent1",{
        template:"<h1>这是我自定义的第一个component</h1>"
    });
    var templateConfig = {
        template:"<h1>这是我自定义的第二个component</h1>"
    }
    Vue.component("mycomponent2",templateConfig)
    var app = new Vue({
        el:"#app",
        data:{
        }
    })
    var app1 = new Vue({
        el:"#app1",
        data:{
        }
    })
</script>

3.2、局部组件

只能自己能用只能使用在当前挂载标签上面

<div id="app">
    <mycomponent1></mycomponent1>
</div>
<div id="app1">
    <mycomponent1></mycomponent1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{},
        components:{
            "mycomponent1":{
                template:"<h1>这是我自定义的第一个component</h1>"
            }
        }
    });
    var app1 = new Vue({
        el:"app1",
        data:{}
    })

</script>

3.3、组件里面模板写法

<div id="app">
    <mycomponet1></mycomponet1>
</div>
<!--在组件里面引用 template
<template id="mytemplate">
    <h1>这是我自定义的一个component</h1>
</template>-->
<script type="text/template" id="mytemplate">
    <h1>template标签中的html</h1>
</script>
<script>
    var app = new Vue({
        el:"#app",
        data:{},
        components:{
            "mycomponet1":{
                template:"#mytemplate"
        }
        }
    })
</script>

模板里面的数据使用函数

<div id="app">
    <mycomponet1></mycomponet1>
</div>
<template id="mytemplate">
    <div>
        <a>xxxxxx</a>
        <form>
            {{name1}}:<input type="text" name="username"/>
        </form>
    </div>
</template>
<!--
    (1)如果要使用模板里面的数据,必须是函数的形式
    (2)模板里面如果有多个标签,必须包含在一个根标签里面
-->
<script>
    var mytemplateConfig={
        template:"#mytemplate",
        data(){
            return {name1:"张三"}
        }
    }
    Vue.component("mycomponet1",mytemplateConfig)
    var app = new Vue({
        el:"#app",
        data:{
            massage:"xxxxxx"
        }
    })
</script>

四、路由

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

4.1、路由的使用

(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代码

<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">详情</router-link>
    <router-link to="/product">产品</router-link>
    <hr/>
    <router-view></router-view>
</div>
<script>
    var index = Vue.component("index",{
        template:'<h1>首页</h1>'
    });
    var about = Vue.component("about",{
        template:'<h1>详情</h1>'
    });
    var product = Vue.component("product",{
        template:'<h1>产品</h1>'
    });
    var router = new VueRouter({
        routes:[{
            path:"/",
            component:index
        },{
            path:"/about",
            component:about
        },{
            path:"/product",
            component:product
        }]
    });
    var app =   new Vue({
        el:"#app",
        data:{
            message:'xxx'
        },
        router:router
    });
</script>

五、webpack打包

把所有的项目资源打包成一些比较小的资源
作用:
(1) 减少页面对于资源的请求,提高效率
(2)可以降低版本,Es6–>Es5为了兼容浏览器
(3)将代码打包的同时进行混淆，提高代码的安全性。

5.1、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文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/bundle.js"></script>
   <!-- <link rel="stylesheet" href="css/index.css"/>-->
</head>
<body>
    <span>我是蔡徐坤</span>
</body>

5.2、打包配置文件方式

webpack.config.js

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

运行:
webpack

5.3、css打包用法

(1)下载安装 css加载器

css-loader style-loader

(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'] 
            }
        ]
    }
};

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

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

(4)在终端 terminal运行 webpack

生成一个bundle.js文件

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

六、Vue-cli 脚手架搭建

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

脚板心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue加强

一、v-on 绑定事件语法 :使用v-on指令注册事件<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>简写方式<标签 @事件句柄=“表达式或者事件处理函数”></标签><div id="app"> {{num}} <button v-on:click="num++">按钮1<...
复制链接

扫一扫