Vue.js学习笔记六
事件监听
使用keyup进行文本框的监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<!-- 分析: -->
<!-- 1. 咱们要监听到 文本框数据的改变，这样才能知道 何时去拼接出一个fullname -->
<!-- 2. 如何监听到文本框数据的改变？? -->
<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', fullname: '' } }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } } }); </script>
</body>
</html>
复制代码
使用watch属性来进行监听Vue实例中的数据改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', fullname: '' } }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } }, watch: {//使用这个属性，能够监视data中指定数据的变化，而后出发这个watch中对应function处理函数 firstname(newVal, oldVal){ // console.log("监视到了firstname的变化") this.getFullname() // console.log(newVal + '-----' + oldVal) }, lastname(){ this.getFullname() } }, }); </script>
</body>
</html>
复制代码
使用 watch 能够监听路由的改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- 1. 安装vue-router路由模块 -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="login">登录</router-link>
<router-link to="register">注册</router-link>
<router-view></router-view>
</div>
<script> let login = { template:'<h1>这是登陆组件</h1>' } let register = { template:'<h1>这是注册组件</h1>' } const router = new VueRouter({ routes:[ {path:'/', component:login}, {path:'/login', component:login}, {path:'/register', component:register}, ] }) var vm=new Vue({ el:'#app', data () { return{ } }, methods:{ }, router, watch: { // this.$router.path '$route.path'(newVal, oldVal){ // console.log(newVal + '-----' + oldVal) if(newVal == '/login'){ console.log("欢迎进入登陆页面") }else if(newVal == '/register'){ console.log("欢迎进入注册页面") } } }, }); </script>
</body>
</html>
复制代码
使用computed计算属性来监听数据的值
计算属性：在computer中，能够定义一些属性，这些属性，叫作【计算属性】，计算属性的本质就是一个方法，只不过咱们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把计算属性当作方法来使用 javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<p>{{fullname}}</p>
<p>{{fullname}}</p>
<p>{{fullname}}</p>
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', } }, methods: { }, computed: { 'fullname'(){ console.log('ok') return this.firstname + '-' + this.lastname } }, }); </script>
</body>
</html>
复制代码
computed使用的一些注意事项
- 计算属性在引用的时候必定不要加（）去调用，直接把它当作普通属性去使用就行了
- 只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会当即从新计算这个属性的值
- 计算属性的求值结果会被缓存起来，方便下次直接使用，若是计算属性方法中所依赖的任何数据都没有发生过变化，则不会从新对计算属性求值
watch、computed和methods之间的对比
computed属性的结果或被缓存，除非依赖的响应式属性变化才会从新计算。主要当作属性来使用methods方法表示一个具体的操做，主要书写业务逻辑watch一个对象，键是须要观察表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操做；能够看做是computed与methods的结合体；
nrm的安装使用
做用：提供了一些最经常使用的NPM包镜像地址，可以让咱们快速的切换安装包时候的服务器地址； 什么是镜像：原来包刚一开始只是存在于国外的NPM服务器，可是因为网络缘由，常常访问不到，这时候，咱们能够再国内，建立一个和官网彻底同样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此这外，使用方式彻底同样。css
- 运行
npm i nrm -g全局安装nrm包 - 使用
nrm ls查看当前全部可用的镜像源地址以及当前所使用的镜像源地址 - 使用
nrm use npm或nrm user taobao切换不一样的镜像源地址
注意：nrm只是单纯的提供了几个经常使用的下载包URL地址，而且可以让咱们在这几个地址之间，很方便的切换，可是，咱们每次安装包的时候，使用的装包工具，都是npmhtml
Vue.js-Webpack
在网页中会引用哪些常见的静态资源？
- JS
- .js .jsx .coffee .ts(TypeScript)
- CSS
- .css .less .sass .scss
- Images
- .jpg .png .gif .bmp .svg
- 字体文件(Fonts)
- .svg .ttf .eot .woff .woff2
- 模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】
网页中引入的静态资源多了之后有什么问题？
- 网页加载速度慢，由于咱们要发起不少的二次请求；
- 要处理错综复杂的依赖关系
如何解决上述两个问题？
- 合并、压缩、精灵图、图片的Base64编码
- 可使用以前学过的requireJS、也可使用webpack解决各个包之间的复杂依赖关系
什么是webpack？
webpack是前端的一个项目构建工具一前端
如何完美实现上述的2种解决方案
- 使用Gulp,基于
task任务的。 - 使用Webpack,是基于整个项目进行构建的。
- 借助于Webpack这个前端自动化构建工具，能够完美实现资源的合并、打包、压缩、混淆等诸多功能。
- 根据官网的图片介绍Webpack打包的过程
- Webpack官网
Webpack安装的两种方式
- 运行
npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 - 在项目根目录中运行
npm i webpack --save-dev安装到项目依赖中
使用webpack
- 首先咱们须要在目录中建立 一个main.js的项目入口文件，index.html中使用到的全部包和css样式到在这导入
// 这是main.js是咱们项目的js入口文件
//1.导入Jquery
//import *** from *** 是ES6中导入模块的方式
//因为ES6的语法过高级了，浏览器解析不了，因此这一行执行会报错
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor', 'yellow')
$('li:even').css('backgroundColor', function(){
return '#' + 'D97634'
})
})
复制代码
- 须要在建立一个webpack.config.js的配置对象，也能够在根目录下的终端中使用（webpack 要打包的文件的路径 打包好的输出文件的路径）命令
const path = require('path')
//这个配置文件，其实就是一个JS文件，经过Node中的模块操做，向外暴露了一个配置对象
module.exports = {
//在配置文件中，须要手动指定入口和出口
entry: path.join(__dirname, './src/main.js'),//入口，表示要使用webpack打包哪一个文件
output:{
path:path.join(__dirname, './dist'), //指定打包好的文件，输出到哪一个目录中去
filename:'bundle.js' //这是指定输出的文件的名称
}
}
复制代码
当咱们在控制台，直接输入webpack命令执行的时候，webpack作了如下几步：
- 首先，webpack 发现咱们并无经过命令的形式，给它指定入口和出口
- webpack就会去项目的根目录中，查找一个叫作
webpack.config.js的配置文件 - 当找到配置文件以后，webpack就会去解析执行配置文件，当解析执行完配置文件后，就获得了配置文件中导出的配置对象
- 当webpack拿到了配置对象后，就拿到了配置对象中，指定的入口和出口，而后进行打包构建
使用webpack-dev-server工具
由于咱们在编写代码并保存以后，想要看到效果的话还须要在终端输入webpack来运行项目，每次都须要执行这种操做，显得太麻烦了，因此咱们使用webpack-dev-server来进行自动的打包编译vue
- 首先咱们须要运行
npm i webpack-dev-server -D，把这个工具安装到项目的本地开发依赖 - 而后咱们须要在
package.json配置项的scripts中进行添加"dev":"webpack-dev-server"配置项 - 以后咱们在终端中输入
npm run dev命令来开启这个webpack-dev-server工具 - 最后咱们须要把index导入的原文件进行修改
<!-- <script src="../dist/bundle.js"></script> -->
<script src="/bundle.js"></script>
复制代码
- 注意
- 安装完毕后，这个工具的用法，和webpack命令的用法，彻底同样
- 因为咱们是在项目中本地安装的webpack-dev-server，因此没法把它看成脚本命令，在pawershell终端中直接运行（只有那些安装到全局-g的工具，才能在终端中正常运行）
- webpack-dev-server这个工具，若是想要正常运行，要求，在本地项目中必须本地安装webpack
- webpack-dev-server 帮咱们打包生成的bundle.js文件，并无存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，因此咱们在项目根目录，根本找不到这个打包好的bundle.js
- 咱们能够认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咋们项目的根目录中，虽然咱们看不到它，可是，能够认为， 和idst src node_modules 平级，有一个看不见的文件，叫作bundle.js
webpack-dev-server在配置项中添加配置参数
- --open：实现调用
npm run dev后直接打开网页，不须要咱们手动去打开 - --port xxx：能够修改打开网页的端口
- --contentBase src：能够用改打开后的默认页面，这里设置为scr目录下的index.html
- --hot：热加载，能够实现局部更新代码，浏览器不须要刷新，内容改变
使用html-webpack-plugin插件配置启动页面
因为使用--contentBase指令的过程比较繁琐，须要指定启动的目录，同时还须要修改index.html中script标签的src属性，因此推荐使用html-webpack-plugin插件配置启动页面。java
- 运行
npm i html-webpack-plugin --save-dev安装到开发依赖 - 修改
webpack.config.js配置文件以下：
//导入处理路径的模块
const path = require('path')
//导入自动生成HTML文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/main.js'),//项目入口文件
output: {//配置输出项
path: path.join(__dirname, './dist'), //配置输出的路径
filename: 'bundle.js' //配置输出的文件名
},
plugins:[
new htmlWebpackPlugin({
template:path.resolve(__dirname, './src/index.html'),//模板路径
filename:'index.html' //自动生成的HTML文件的名称
})
]
}
复制代码
- 修改
package.json中script节点中的dev指令以下：
"dev":"webpack-dev-server"
复制代码
- 将index.html中script标签注释掉，由于
html-webpack-plugin插件会自动把bundle.js注入到index.html页面中
webpack打包第三方样式文件
使用webpack打包css文件
- 运行
npm i style-loader css-loader --save-dev - 修改
webpack.config.js这个配置文件：
module:{//用来配置第三方loader模块的
rules:[
{test: /\.css$/, use:['style-loader', 'css-loader']}//处理css文件的规则
]
}
复制代码
- 注意：
use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
- 运行
npm i less-loader less -D - 修改
webpack.config.js这个配置文件
{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}
复制代码
使用webpack打包sass文件
- 运行
npm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加处理sass文件的loader模块：
{test: /\.sass$/, use:['style-loader', 'css-loader', 'sass-loader']}
复制代码
webpack处理的第三方文件类型的过程
- 发现这个要处理的文件不是JS文件，而后就去配置文件中，查找有没有对应的第三方loader规则
- 若是能找到对应的规则，就会调用对应的loader处理这种文件类型；
- 在调用loader的时候，是从后往前调用的；
- 当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去
相关文章
- 1. Vue.js学习笔记
- 2. vue.js学习笔记
- 3. vue.js 学习笔记
- 4. Vue.js 学习笔记
- 5. vue.js+element ui学习笔记
- 6. vue.js学习笔记（一）
- 7. Vue.js 源码学习笔记
- 8. vue.js学习笔记-10
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Vue.js学习笔记
- 2. vue.js学习笔记
- 3. vue.js 学习笔记
- 4. Vue.js 学习笔记
- 5. vue.js+element ui学习笔记
- 6. vue.js学习笔记（一）
- 7. Vue.js 源码学习笔记
- 8. vue.js学习笔记-10