vue-Day02

最新推荐文章于 2024-09-02 17:34:07 发布

囬香豆

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量93

点赞数

文章标签： vue js javascript nodejs

本文链接：https://blog.csdn.net/weixin_44470298/article/details/103766319

版权

1、绑定事件指令 v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    点击右侧按钮可以增加数字---{{num}}---
    <button v-on:click="num++">点击+1</button>
    <button @click="num++">点击+1</button>
    <button @click="countSum()">点击+2</button>
    <button @click="countSum">点击+2</button>
    <button @click="say('这是一个弹出窗口')">点击弹出窗口</button>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num + 2
            },
            say(msg){
                alert(msg);
            }
        }
    })
</script>
</html>

2、计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
        {{birthday}}}<br>
        {{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}<br>
        {{getBirth()}}<br>
        {{birth}}
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0,
            birthday:new Date()
        },
        methods:{//方法
            getBirth(){
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        },
        computed:{
            //计算属性
            birth(){
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        }
    })
</script>
</html>

3、watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch属性</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg"/>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:''
        },
        methods:{

        },
        watch:{
            msg(newVal,oldVal){
                console.log(newVal,oldVal);
            }
        }
    })
</script>
</html>

4、全局属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局属性</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
</body>
<script>
    Vue.component("mycomponet1",{
        template:"<h1>这是第一个全局组件</h1>"
    });
    var MyComponent2 = {
        template: "<h2>这是第二个全局组件</h2>"
    }
    Vue.component("mycomponet2",MyComponent2);

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

5、局部属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局属性</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
<!--    <mycomponet2></mycomponet2>  因为是局部组件，所以这里放开会报错-->
</div>
</body>
<script>
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h1>这是第一个局部组件</h1>"
            },
            "mycomponet2":{
                template:"<h2>这是第二个局部组件</h2>"
            }
        }
    });
    new Vue({
        el:"#app2"
    })
</script>
</html>

6、template模版组件

写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template写法</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <mycomponet1></mycomponet1><!--写法一-->
</div>
<div id="app2">
    <template id="mytemplate">
        <h3>这是template的写法2</h3><!--写法二（形式一）-->
    </template>
</div>

<!--<script type="text/template" id="mytemplate2">
    <h2>这是template的写法2（形式二）</h2>
</script>-->
</body>
<script>
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h1>这是template写法一</h1>"
            }
        }
    });

    //写法二
    new Vue({
        el:"#app2",
        components:{
            "mycomponet2":{
                template:"#mytemplate2"
            }
        }
    })
</script>
</html>

模板里面的数据必须是函数

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>template组件的数据是函数</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    {{name}}
</div>
<template id="mycomponet">
    <form>
        {{name}}<input type="text" v-model="msg" v-on:change="changeData" />
        <br>
        {{msg}}
    </form>
</template>
</body>
<script>
    new Vue({
        el:"#app1",
        data:{
            "name":"张无忌"
        },
        components:{
            "mycomponet1":{
                template:"#mycomponet",
                data:function () {
                    return{
                        name: "组件名字",
                        msg:"这个是template的值",
                    }
                },
                methods:{
                    changeData(){
                        console.log(this.msg)
                    }
                }
            }
        }
    });
</script>
</html>

7、路由

(1)安装路由

安装路由 npm install vue-router

卸载路由 npm uninstall vue-router

(2)引用vue-router.js文件

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

(3)直接在页面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app1">
    <!--类似于a标签-->
    <router-link to="/">首页</router-link>
    <router-link to="/login">登录</router-link>
    <router-link to="/logout">注销</router-link>

    <!-- 路由出口-->
    <router-view></router-view>
</div>

<template id="index">
    <h1>这是主页主页主页</h1>
</template>
</body>
<script>
    //定义组件
    var index =Vue.component("index",{
        template:"#index"
    })
    var login =Vue.component("login",{
        template:"<h1>这是登录登录页面</h1>"
    })
    var logout =Vue.component("logout",{
        template:"<h1>这是注销注销页面</h1>"
    })

    //创建一个路由
    var routes =new VueRouter({
        routes:[{
            path:"/",
            component:index
        },{
            path:"/login",
            component:login
        },{
            path:"/logout",
            component:logout
        }
        ]
    })

    //把路由加到属性中
    new Vue({
        el:"#app1",
        data:{
            "name":"测试"
        },
        router:routes,
    });
</script>
</html>

8、webpack 打包

打包目的

(1)减少单页面内的衍生请求次数，提高网站效率

(2) 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。更方便导入导出

(3)可以进行代码混淆提高安全性

打包工具

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分

析，然后将这些模块按照指定的规则生成对应的静态资源。

使用webpack

打包js文件

(1)下载安装

npm install -g webpack

npm install -g webpack-cli

(2)创建两个js文件

a.js

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

console.log(a);
console.log(b);
alert(b);
alert("打包成功啦");

b.js

define(function () {
    var b = "b模块";
    return b;
});

执行命令:

webpack src/a.js -o dist/bundle.js

打包css文件

步骤一：

npm install style-loader --save-dev

npm install css-loader --save-dev

步骤二：

a. js引入:

*var* a = “a模块”;
*var* b = require(’./b.js’);

console.log(b);

require(’…/css/index.css’)

步骤三：在webpack.config.js文件引入下面代码

*var* path = require(“path”);
module.exports = {
entry: ‘./web/js/a.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
filename: ‘bundle.js’
},
module: {
rules: [
{
test: /.css$/, //匹配文件规则
use: [‘style-loader’, ‘css-loader’] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
}

步骤四：打包：webpack

9、vue部署到服务器

(1)安装

	npm install webpack-dev-server --save-dev

(2)package.json配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
  }
 版本兼容性:
 	 "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"

(3)运行 npm run dev命令启动服务

ctrl+c —>y 停止服务

10、Vue的脚手架

就是一个模板，已经有了内容，修修改改就好了

(1) 安装脚手架

npm install -g vue-cli

(2)创建一个项目

(3)执行 vue init webpack

询问创建项目 yes

询问vue-router yes

… no

(4)运行命令

npm run dev

囬香豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-Day02

1、绑定事件指令 v-on<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>事件指令</title> <script ty...
复制链接

扫一扫