vue-02

最新推荐文章于 2023-03-25 15:41:22 发布

Dylanyj

最新推荐文章于 2023-03-25 15:41:22 发布

阅读量69

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Dylanyj/article/details/103765706

版权

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组件: 自定义的代码块或者自定义标签

(2)组件有什么用:

(1)可以反复使用

(2)完成一些功能

(3)vue里面组件分类

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

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

vue组件是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>大大大大</h1>"
    });

    var mycomponet2={
        template:"<h1>哒哒哒哒</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路由: 定位到一个组件类似于

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-immPtRAG-1577689318736)(笔记.assets/image-20191229103047367.png)]

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

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>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标签 a的组件-->
    <router-link to="/">首页</router-link>
    <router-link to="/a">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>
    <!--路由出口-->
    <router-view></router-view>
</div>




<script>
 //定义组件
  var  index =Vue.component("index",{
      template:"<h1>首页</h1>"
 });
 var  aCp =Vue.component("a",{
     template:"<h1>我老A</h1>"
 });
 var  bCp =Vue.component("b",{
     template:"<h1>我老B</h1>"
 });
 var  c =Vue.component("c",{
     template:"<h1>我老C</h1>"
 })
 //创建一个路由
 var routes1= new VueRouter({
     routes:[{
         path:"/",
         component:index
     },{
         path:"/a",
         component:aCp
     },
         {
             path:"/b",
             component:bCp
         },

         {
             path:"/c",
             component:c
         }
     ]
 });

   //把路由挂载到vue对象中
    new Vue({
        el:"#app1",
        data:{
            "name":"啊坤"
        },
   router:routes1
    });

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

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

7.2 修改一个页面

test.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '困困困困困'
      }
    }
  }
  </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import  Test from '@/components/Test'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/test',
      name:'test',
      component:Test
    }
  ]
})

Dylanyj

关注

0
点赞
踩
0

收藏

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

1.绑定事件指令 v-on(掌握)<button v-on:click="num++">点击1</button><button @click="num++">点击2</button><button @click="countSum()">点击3</button><button @click="countSum"&...
复制链接

扫一扫