1. 技术文章
  2. Vue实例

Vue实例

由 自古美人都是妖i 提交于 2019-12-30 11:43:20

 

1绑定事件指令 v-on

<button v-on:click="num++">点击1</button>
<button @click="num++">点击2</button>
<button @click="countSum()">点击3</button>
<button @click="countSum">点击4</button>

<button @click="say('今天天气好冷了')">点击5</button>

<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num + 1
            },
            say(msg){
                console.log(msg);
            }
        }
    })
</script>

2 计算属性

作用:可以代替的复杂的表达式

比如下面:

<div id="app">
    {{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}
    {{birth1}}
    {{getBirth1()}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0,
            birthday:1529032123201
        },
        methods:{
            getBirth1(){
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        },
        computed:{
            //计算属性
            birth1(){
              return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        }
    })
</script>

3 watch

 

<body>
<div id="app">
    <input type="text" v-model="msg"/>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
           msg:''
        },
        methods:{

        },
        watch:{
            msg(newVal,oldVal){
                //可以获取上次改变的值-- 记录日志 --用处不是很大
                console.log(newVal,oldVal);
                
            }
        }
    })
</script>
</body>

4 Vue 组件

(1)以前组件: Component --easyui 组件 datagrid tabs menu...panel,dialog

Vue组件: 自定义的代码块或者自定义标签 <atag></atag>

(2)组件有什么用:

(1)可以反复使用

(2)完成一些功能

(3)vue里面组件分类

全局组件:任意地方都可以使用,任意挂载的标签都使用

局部组件:只能在当前的挂载的标签里面的使用

4.1 全局组件

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<script>
    //全局组件
    Vue.component("mycomponet1",{
        template:"<h1>这个字好大1111111</h1>"
    });

    var mycomponet2={
        template:"<h1>这个字好大222222</h1>"
    }
    Vue.component("mycomponet2",mycomponet2);


    new Vue({
        el:"#app1"
    });

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

4.2 局部组件

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
</div>
<script>



    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件111</h2>"
            },
            "mycomponet2":{
                template:"<h2>这是一个局部的组件222</h2>"
            }
        }
    });

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

4.3组件里面模板写法

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

</div>
<!--<template id="mytemplate">
    <h3>这是一个template写法1</h3>
</template>-->
<script type="text/template" id="mytemplate">
    <h1>template标签中的htmlssssssssssssssss</h1>
</script>
<script>


    // 写法一:直接template写字符串
  /*  new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件111</h2>"
            }
        }
    });*/
    //写法二:
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"#mytemplate"
            }
        }
    });


</script>

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

<div id="app1">
    <mycomponet1></mycomponet1>
    {{name}}

</div>
<template id="mytemplate">
    <form>
        {{name}}<input type="text" />
    </form>
</template>



<script>

    new Vue({
        el:"#app1",
        data:{
          "name":"用户名1111"
        },
        components:{
            "mycomponet1":{
                template:"#mytemplate",
                data:function(){
                    return {
                        "name":"用户名"
                    }
                }
            }
        }
    });


</script>
</body>
</html>

5 路由

路由: 找路

路由器: 很多接口,通过接口 找到一台电脑

vue路由: 定位到一个组件 类似于<a href="">

5.1路由使用

(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)使用

<body>
<div id="app1">
    <!--相当于a标签 long 龙哥的组件-->
    <router-link to="/">首页</router-link>
    <router-link to="/long">龙哥</router-link>
    <router-link to="/cheng">成哥</router-link>
    <router-link to="/jinbo">金箔哥</router-link>
    <!-- 路由出口-->
    <router-view></router-view>
</div>
<script>
    //定义组件
    var index = Vue.component("index",{
        template:"<h1>首页</h1>"
    });
    var longCp = Vue.component("long",{
        template:"<h1>大家好,我是渣渣龙</h1>"
    });

    var chengCp = Vue.component("cheng",{
        template:"<h1>大家好,晨晨渣</h1>"
    });

    var jinbo = Vue.component("jinbo",{
        template:"<h1>大家好,金箔哥</h1>"
    })
    //创建一个路由
   var routes1 =  new VueRouter({
        routes:[{
           path:"/",
            component:index
        },{
            path:"/long",
            component:longCp
        },{
            path:"/cheng",
            component:chengCp
        },{
            path:"/jinbo",
            component:jinbo
        }]
    });

    //把路由挂载到vue对象上面去

    new Vue({
        el:"#app1",
        data:{
          "name":"用户名1111"
        },
        router:routes1

    });


</script>
</body>

6 webpack 打包

把项目里面内容(js,css,img等)这些资料进行打包

6.1 为什么需要打包 -->项目开发完之后

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

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

导入 导出

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

 

6.2 webpack

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

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

6.3 使用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);

b.js

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

执行命令:

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

 

6.4 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

6.5 部署(了解)

把前端内容放入服务里面运行

(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 停止服务

 

 

7 Vue的脚手架(掌握)

Vue脚手架 --就是前端项目的模板(已经就有一些内容)

7.1 使用脚手架

(1) 安装脚手架

npm install -g vue-cli

(2)创建一个项目

(3)执行 vue init webpack

询问创建项目 yes

询问vue-router yes

... no

 

(4)运行命令

npm run dev

标签
Webpack
vue
前端组件
vue-router
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!