vue-day02

最新推荐文章于 2023-12-12 16:34:20 发布

寻找java养生之道

最新推荐文章于 2023-12-12 16:34:20 发布

阅读量191

点赞数

分类专栏： ssm架构文章标签： vue js javascript java react

本文链接：https://blog.csdn.net/W1184394406/article/details/103754748

版权

ssm架构专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue的基础知识，包括事件绑定指令v-on，计算属性，watcher，组件的全局和局部使用，以及模板的编写规则。重点讲解了Vue组件的复用性和重要性，并探讨了路由的概念和使用，同时简单介绍了webpack的打包过程和Vue脚手架的运用。

摘要由CSDN通过智能技术生成

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>这个字好大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路由: 定位到一个组件类似于

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YzI8cTKn-1577607529386)(笔记.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)使用

<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命令 启动服务

```java
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 修改一个页面

…

寻找java养生之道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录