Vue基础（二）

最新推荐文章于 2023-05-17 19:46:30 发布

HK丶

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量103

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42498094/article/details/103372604

版权

1.vue事件

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

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        {{num}}
        <button v-on:click="num++">按钮1</button>
        <button @click="num++">按钮2</button><!--简写-->
        <button @click="add">按钮3</button><!--简写-->
        <button @click="say('xxxxx')">按钮4</button><!--简写-->
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            add(){
                this.num++;
            },
            say(msg){
                console.log('qqqqqq')
            }
        }
    })
</script>
</body>
</html>

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

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

<div id="app">
 <button v-on:click="say('hello')">hello</button><br/>
 <button @click="say('hi')">hi</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
	},
	methods:{
		say:function(message){
			//this指向当前vue对象：app
			console.log(this);
		}
	}
});

2.计算属性和watch

2.1、计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
data:{
birthday:1529032123201 // 毫秒值
}

方案1:我们在页面渲染，希望得到yyyy-MM-dd的样式：

 <h1>您的生日是：{{
      new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
      }}
  </h1>

方案2:
Vue中提供了计算属性，来替代复杂的表达式：

 var vm = new Vue({
      el:"#app",
      data:{
          birthday:1429032123201 // 毫秒值
      },
      computed:{
          birth(){// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }
  })

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

 <div id="app">
         <h1>您的生日是：{{birth}} </h1>
      </div>

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

<div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

3.组件

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

总结:
组件是用来完成特定功能的一个自定义的HTML标签
例如:

<body>
	<mytag></mytag>
</body>

注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能
3.2、组件的作用
组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.
3.3、组件的分类
组件分为全局组件和局部组件
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效
3.1.1、全局组件
语法：
Vue.component(“自定义标签的名字”,{配置对象})
特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景：
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
	template : "<h1>这是第一个全局组件</h1>"
})

//定义第二个全局组件
var component2Config = {
	template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);

var app = new Vue({
	el: "#app",
	data: {
	}
});

var app1 = new Vue({
	el: "#app1",
	data: {
	}
});

3.1.2、局部组件
语法：
var app = new Vue({
el: “#app”,
data: {},
components : {
“局部组件的名字1” : {组件的配置对象}
“局部组件的名字2” : {组件的配置对象}
}
});
特点：
局部组件只能够在所挂载的标签中使用

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>


//>>1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
	el: "#app1",
	data: {},
	components : {
		"mycomponent" : {
			template : "<h1>这是一个局部组件</h1>"
		}
	}
});

//>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({	
	el: "#app2",
	data: {}
});

4.组件使用两种HTML模板

组织两种方式
1 直接在template属性写上html代码字符串或者变量指定
template: “html代码的字符串”

2 将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串)
a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码

b. template属性上使用上门的html模板代码.

代码:

<div id="app4">
    <mycomponent4></mycomponent4>
</div>

<!--   <template id="mytemplate">
       <h1>template标签中的html</h1>
   </template-->>
<script type="text/template" id="mytemplate">
    <h1>template标签中的htmlssssssssssssssss</h1>
</script>

<script type="text/javascript">
    var app4 =  new Vue({
        el:"#app4",
        components:{
            "mycomponent4":{
                template:"#mytemplate"
            }
        }
    });
</script>

5、组件中的数据必须是函数
组件中数据的定义
语法:
“组件的名字”:{
template: “”,
data : function(){
return {
键1:值1,
键2:值2
}
}
}
注意事项:
data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

components:{
“mycomponent1”:{
// “template”:"#templateStr1"
“template”:"#templateStr2",
//模板是定义数据以下是可行的
//1 必须是函数
//2 通过return返回数据对象
//3 如果有多个数据就是对象对象多个属性及值
data(){
return {
messaage:“jjjj”,
yhptest:“xxxxxxxxxxxxxx”
}
}

测试代码:

<body>

    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <form method="post">
            {{name1}}:<input type="text" /> <br>
            密码:<input type="password" /><br>
            <input type="button" @click="login" value="登录" />
        </form>
    </template>

<script type="text/javascript">

   var mytabConfig = {
       template:"#mytemplate",
       data(){
           return {"name1":"xxxx"}
       }
   }
   Vue.component("mycomponent",mytabConfig);
   var app = new Vue({
       el: "#app",
       data: {
       }

   });

</script>

5.路由

5.1、什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
5.2、路由入门
在js中定义路由；

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

挂载到一个dom元素上；
使用路由；
定义路由出口

6.webpack打包

6.1、为什么需要打包

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。
6.2、是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。
6.3、使用
6.3.1、安装

本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：–推荐使用后面要用
npm install -g webpack
npm install -g webpack-cli
6.3.2、简单使用
6.3.3、Js打包-配置文件
上面我们每次在打包的时候，都要输入 webpack src/a.js -o dist/bundle.js 这个命令，比较麻烦，所以我们可以按照下面的方式，新建一个js文件，到时候打包的时候，只需要运行webpack 命令就可以进行打包

webpack.config.js ，该文件与项目根处于同级目录

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

6.4、Js打包-入门
创建前端项目
npm init -y

a.js
var a = “a模块”;
var b = require(’./b.js’);
console.log(b);
b.js
define(function () {
var b = “b模块”;
return b;
});
—amd模式可以但是commonjs必须在nodejs环境，浏览器环境不ok
打包：webpack src/a.js -o dist/bundle.js

Index.html

6.4.1、Css加载
6.4.2、加载器
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 -
vue-loader 转换vue组件 *.vue
css-loader 加载css文件
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

6.4.3、实现

步骤一：
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文件引入下面代码

```java
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、热更新web服务器
刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务；

1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config ./webpack.conf.js",      },

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1

npm run dev/test
出现错误之后
https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html

“devDependencies”: {
“css-loader”: “^3.1.0”,
“style-loader”: “^0.23.1”,
“webpack”: “^3.10.0”,
“webpack-dev-server”: “^2.9.7”
},

在执行 npm install

HK丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（二）

1.vue事件1.1、事件入门语法 :使用v-on指令注册事件<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>简写方式<标签 @事件句柄=“表达式或者事件处理函数”></标签><!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1...
复制链接

扫一扫