vue学习总结2

最新推荐文章于 2022-11-04 15:49:09 发布

YangJianzuiniubi

最新推荐文章于 2022-11-04 15:49:09 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/YangJianzuiniubi/article/details/103373480

版权

一 . vue事件

1.事件入门

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

注意事项:

事件处理函数作为事件句柄的值不需要调用.

2.内联事件处理函数

语法:
    使用v-on指令注册事件
       <标签 v-on:事件句柄="内联函数(实际参数)"></标签>
    简写方式
       <标签 @事件句柄="内联函数(实际参数)"></标签>

注意事项:
    内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数

二.计算属性和watch

1.计算属性

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

2.watch

watch可以让我们监控一个值的变化。从而做出相应的反应

三. 组件

1. 什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素

2.组件的作用

组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

3.组件的分类

组件分为全局组件和局部组件

全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv1">
    <big1></big1>
    <big2></big2>
</div>
<div id="myDiv2">

</div>
<script>
    /*直接给模板*/
    Vue.component("big1",{
        template:"<h1>这是超大号的</h1>"
    });
    /*先把模板准备好*/
    var template1  = {
        template:"<h1>这也是是超大号的</h1>"
    }
    /*再把模板给到组件*/
    Vue.component("big2",template1)
    var myDiv1 =   new Vue({
        el:"#myDiv1",
        data:{
        }
    });
    var myDiv2 =   new Vue({
        el:"#myDiv2",
        data:{
        }
    });
</script>
</body>
</html>

局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv1">
    <small1></small1>
</div>
<div id="myDiv2">
    <small1></small1>
</div>
<script>
    /*局部组件智能在定义组件的vue对象挂载的元素内使用*/
    var myDiv1 =   new Vue({
        el:"#myDiv1",
        data:{
        },
        components:{
            "small1":{
                template:"<h3>这是小号的哈</h3>"
            }
        }
    });
    var myDiv2 =   new Vue({
        el:"#myDiv2",
        data:{
        }
    });
</script>
</body>
</html>

4.html创建模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv1">
    <my-list></my-list>
</div>
<template id="myTemplate">
    <div>
        <h2>列表</h2>
        <form>
            {{username1}}: <input type="text" name="username" />
            {{password1}}: <input type="text" name="password" />
        </form>
    </div>
</template>

<script>
    var templateCon = {
        template:"#myTemplate",
        data(){
            return {
                username1:"用户名",
                password1:"密码"
            }
        }
    }
    Vue.component("myList",templateCon)
    var myDiv1 =   new Vue({
        el:"#myDiv1",
        data:{
        },
    });
</script>
</body>
</html>

5.script创建模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv1">
    <small1></small1>
</div>
<script type="text/template" id="smallTem">
    <h4>这是更小的</h4>
</script>
<script>
    /*局部组件智能在定义组件的vue对象挂载的元素内使用
    * 注意：不能使用small作为组件名
    * */
    var myDiv1 =   new Vue({
        el:"#myDiv1",
        data:{
        },
        components:{
            "small1":{
                template:"#smallTem"
            }
        }
    });
</script>
</body>
</html>

四. 路由

1.什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载

2.使用

1.引入路由的js文件

2.定义组件

3.创建路由（那个路径对应哪个组件）

4.在vue对象中使用路由

5.在标签内引用

五. webpack打包

1.打包的优点

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。

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

将代码打包的同时进行混淆，提高代码的安全性。

2.webpack

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

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

3.使用

3.1.js打包的用法

(1)安装

npm install -g webpack

npm install -g webpack-cli

(2)创建对应的文件

a.js

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

b.js

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

(3)运行打包的命令

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

(4)创建一个html页面 ,引入bundle.js文件

3.2 打包配置文件方式

在项目的根路径下面创建一个文件:

webpack.config.js

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

//运行

webpack

3.3 css打包用法

(1)下载安装 css加载器

css-loader style-loader

```js
npm install style-loader --save-dev
npm install css-loader --save-dev
```

(2) 配置webpack.config.js

```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']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            }
        ]
    }
};

```

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

```js
var a ='aaa';
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 --运行

YangJianzuiniubi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习总结2

一 . vue事件1.事件入门语法:使用v-on指令注册事件<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>简写方式<标签 @事件句柄="表达式或者事件处理函数"></标签>注意事项:事件处理函数作为事件句柄的值不需要调用.2.内联事件处理函数语法:使...
复制链接

扫一扫