VUE学习笔记整理
v-cloak能够解决传值闪烁的问题
-
v-text是设置文本内容 -
{{msg}}同样是
后者可以添加其它内容,前者只能覆盖
<img src="C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\1576598096146.png" alt="1576598096146" />
v-bind是提供的一个绑定属性,会把变量加上一个表达式
[图片上传失败...(image-e7ce8f-1587091357139)]
v-bind可以简写为:- VUE中提供了
v-on事件绑定机制可以用@代替v-on
<input type="button" value="按钮" v-on:click="show"/>
然后在对象里面添加
method{
show:function(){
//...需要点击事件执行的代码
}
}
- 如何定义一个基本Vue代码结构
- 插值表达式和
v-textv-cloak是消除传值闪烁v-html将data里面的数据以html的形式插入v-bindv-on
//注意在vm实例中如果想获取data上的数据,想要调用methods中的方法,必须通过this.数据属性名
//来访问,this就表示我们new出来的VM实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'野狼disco!~'
},
methods{
lang(){
console.log(this.msg);//野狼disco!~
}
}
});
<img src="C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\1576600755329.png" alt="1576600755329" style="zoom:50%;" />
箭头函数解决了this的指向问题
样式的写法
[图片上传失败...(image-4808b4-1587091357139)]
data:{
cssName:{color:red,kfont}
}
V-for循环普通数组
var vm = new Vue({
el: '#app',
data:{
list:[1,2,3,4,5,6,7]
},
method:{}
});
<p v-for="(item,i) in list">
{{item}}
</p>
V_IF和V_FOR的使用
<h3 v-if="flag">
这是用v-if控制的元素
</h3>
<h3 v-if="flag">
这是用v-show控制的元素
</h3>
[图片上传失败...(image-de1ffc-1587091357139)]
[图片上传失败...(image-349005-1587091357139)]
发送请求到后台
[图片上传失败...(image-5564e1-1587091357139)]
全局配置,可以省去上去的{emulateJSON:true}的参数,可以简化配置
Vue.http.options.emulationJSON = true;
Vue的组件的学习
组件的出现是为了拆分vue的模块的,拆分代码量,不同的功能不同的组件
方便UI组件的的重用
模块化
方便分层开发
Vue.extends({
template:'<h3>这是通过Vue.extends创建的组件</h3>'
//通过template属性,指定组件要拓展的HTML结构
});
//Vue.component('组件的名称,创建出来的组件模块对象');
Vue.component('myCom1',com1);
第二种方式
//引用<my-comm></my-comm>来用
Vue.component('myComm',Vue.extend({
template:'<h3>这是一个component组件</h3>'
}));
注意:必须只有一个根元素
//引用<my-comm></my-comm>来用
Vue.component('myComm',Vue.extend({
template:'<h3>这是一个component组件</h3><span></span>'//这样就报错
}));
//修正
Vue.component('myComm',Vue.extend({
template:'<div><h3>这是一个component组件</h3><span></span></div>'//这样就报错
}));
第三种方式
<div id="app">
<mycom></mycom>
</div>
<template id="comp1">
<div>
<span>我是span</span>
<h2>我是h2</h2>
<a href="javasript:;">我是a</a>
</div>
</template>
<script>
// Vue.component('mycom',Vue.extend({
// template: '#comp1'
// }));
Vue.component("mycom",{
template:'#comp1'
});
var vm = new Vue({
el:'#app',
data:{
},
methods:{
}
});
</script>
//注册私有组件
var vm2 = new Vue({
el:'#app2',
data:{
},
methods:{
},
filters:{},
directives:{},
components:{
login:{
template:'<h3>我是h3</h3>'
}
},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}
});
组件可以有自己的data
Vue.component("mycom",{
template:'#comp1',
data:function(){
return {msg:'zs'};
}
});
组件也有data,是一个函数,返回的是对象,method一样
<div id="app2">
<mycomSmycom>
<login></login>
</div>
<template id="comp1">
<div>
<input type="button" value="点击我+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
// Vue.component('mycom',Vue.extend({
// template: '#comp1'
// }));
Vue.component("mycom",{
template:'#comp1',
data:function(){
return {count:0};
},
methods:{
increment(){
this.count++;
}
}
});
</script>
[图片上传失败...(image-17516-1587091357139)]
父组件把方法传递给子组件
<body>
<div id="app">
<!--父组件向子组件传递方法,使用的是,时间绑定机制:v-on当我们自定义了一个属性之后,那么子组件-->
<!--就能够通过某些方式来调用,传递进去的这个方法了-->
<com2 @func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是一个子组件</h1>
<input type="button" value="触发子组件的myclick事件" @click="myclick"/>
</div>
</tmplate>
<script>
var com2 ={
template:'#tmp1',
methods:{
myclick(){
console.log("这是一个子组件的click事件");
this.$emit('func');
}
}
};
var vm = new Vue({
el:'#app',
data:{
},
methods:{
show(){
console.log("这是一个show");
}
},
components:{
com2
}
});
</script>
</body>
show是父组件的方法,我们想在子组件中调用父组件的方法,就得使用父组件向子组件传值的方法来做
<body>
<div id="app">
<!--父组件向子组件传递方法,使用的是,时间绑定机制:v-on当我们自定义了一个属性之后,那么子组件-->
<!--就能够通过某些方式来调用,传递进去的这个方法了-->
<com2 @func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是一个子组件</h1>
<input type="button" value="触发子组件的myclick事件" @click="myclick"/>
</div>
</template>
<script>
var com2 ={
template:'#tmp1',
data(){
return {
sonmsg:{name:'zs',age:18}
}
},
methods:{
myclick(){
console.log("这是一个子组件的click事件");
this.$emit('func',this.sonmsg);//从第二个参数开始就是传参的参数
}
}
};
var vm = new Vue({
el:'#app',
data:{
dddd:null
},
methods:{
show(data){
console.log(data);
this.dddd=data;
}
},
components:{
com2
}
});
</script>
</body>
</html>
使用ref 来获取DOM元素
<h3 id="myh3" ref="myh3"> 来定义一个ref的引用
console.log(this.$refs.myh3.innerText); 获取ref的dom元素
还可以获取组件的引用
<div id="app">
<login ref="mylogin"></login>
<input type="button" value="获取元素" @click="getElement">
<h3 id="myh3" ref="myh3"><!--使用ref-->
哈哈哈哈,今天是一个好日子!!!
</h3>
</div>
<script>
var login = {
template:'<h1>登录组件</h1>',
data(){
return {
msg:'son msg'
}
},
methods:{
show(){
console.log("调用了子组件的方法");
}
}
}
var vm = new Vue({
el:'#app',
data:{
},
methods:{
getElement(){
// console.log(document.getElementById("myh3").innerText);
// console.log(this.$refs.myh3.innerText);
console.log(this.$refs.mylogin.msg);
console.log(this.$refs.mylogin);
}
},
components:{
login
}
});
</script>
</body>
监视变化的事件
监听事件的改变属性
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
getFullName(){
this.fullname = this.firstname+"-"+this.lastname;
}
},
watch:{
//使用这个属性,可以监视data中指定数据的变化,然后触发这个watch中对应的数据
'firstname':function(newVal,oldVal){
console.log('监视到了fistname的变化了');
this.fullname = this.firstname + this.lastname;
}
}
在什么场景下更适合使用哪一个
/*计算属性和methods和watch之间的区别 1.在methods里面可以写大量的逻辑 2.computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当做属性来使用 3.watct一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定的数据的变化,从而进行某些具体的业务逻辑操作,可以看做 是computed和methods的结果体*/
nrm的安装使用
nrm ls 是展示有的所有的镜像的源地址
nrm use npm 使用哪一个nrm
使用nrm use npm 或nrm use taobao 切换不同的镜像的源地址
Webpack的学习
- js
- css
- images
- fonts
- 模板文件
.ts typescript语言
减少了依赖的关系,和资源的请求
webpack .\src\main.js -o .\dist\bundle.js webpack打包的命令
npm install webpack-cli -g 通过npm安装webpack的客户端
const path = require('path')
module.exports = { //输出模块
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
}
};
//配置要打包的路径,和打包好的输出路径,就可以帮我们打包好文件
[图片上传失败...(image-ec5a7d-1587091357139)]
cnpm i less-loader -D 下载less
cnpm i sass-loader -D 下载sass
npm i 安装包
了解:目前我们安装的babel-preset-env是比较新的语法,之前,我们安装的是babel-preset-es2015,现在出现了一个babel-preset-env
[图片上传失败...(image-7c3677-1587091357139)]
第一套
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套
cnpm i babel-preset-env babel-preset-stage-0 -D
[图片上传失败...(image-d24a98-1587091357139)]
webpack构建vue
npm i vue -S 将vue这个包运行依赖
导入vue,配置别名
resolve:{
alias:{
"vue$":"vue/dist/vue.js"
}
}
webpack中使用vue的总结
//总结梳理:webpack中如何使用vue;
//1.安装vue的包 cnpm i vue -S
//2.由于在webpack中推荐使用vue这个组件模板文件定义组件,所以需要安装能解析这种文件的loader cnpm i //vue-loader vue-template-complier -D
//3.在main.js中导入vue模块 import Vue from 'vue'
//4.定义一个vue结尾的组件,其中组件有三部分组成:template script style
//5.使用import 导入这个组件
//6.创建vm实例,var vm = new Vue({el:'#app',render:c => return c(login)})
//7.在页面中创建一个为app的div元素,作为我们vm实例要控制的区;
向外暴露
//这是node中向外暴露成员的形式
//在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块
//ES6中导入模块,使用import模块名称from '导入表示符' import '表示路径'
//在node中,使用vue 名称 = require('模块标识符') 导入
//module.exports和exports来暴露成员
var info = {
name:'zs',
age:19
}
var addr = {
address:'北京'
}
export default info
//注意:export default 向外暴露的成员,可以使用任意的变量来接收
//在一个模块中export default只允许向外暴露一次
export var title = '小新星'
//在一个模块中可以同时使用 export default 和export
//使用export可以到处多个
//使用export必须要{exportName}接收
//如果想要换一个名称接受,可以使用as
在webpack中安装vue-router
cnpm i vue-router -S 安装包
样式
<style lang="scss" scoped>
/*
1. scoped 只是在该组件内有效果使用scoped
2. 如果是在组件内的,建议吧scoped属性都加上
3.lang="scss" 表示是可以使用scss的样式的
*/
h1{
color:aqua
}
</style>
mint-UI
// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);
Git 的使用
git init 初始化git
git status 将文件添加到git中
git add .
git commit -m 'init my project' 提交
git remote add origin https://github.com/tfzhHackCoder/vue-crm.git 和远程仓库做一下关联
git push -u origin master 提交到远程仓库
git pull拉取代码
git push -f origin master 强制提交代码
git remote rm origin 删除远程仓库
linkActiveClass 当路由被激活,触发样式
mint-ui 文档地址
<a href='http://mint-ui.github.io/docs/#/'>mint-ui</a>
导入时间插件
//cnpm i moment -S 安装时间插件的包
//引入时间的插件
import moment from 'moment';
//定义一个全局过滤器
Vue.filter('dateFormat',function (dataStr,pattern="YYYY-MM-DD HH:mm:ss") {
return moment(dataStr).format(pattern);
})
使用懒加载,mint-ui的懒加载图片
获取id
this.$route.params.id 获取id
vue的生命周期的
//beforecreate : 一般使用场景是在加 loading事件 的时候
//created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）
//beforemount：处于组件创建完成，但未开始执行操作
//mounted ：处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ）
//beforeupdate、updated：处于数据更新的前后
//beforeDestroy：当前组件还在的时候，想删除组件
//destroyed ：当前组件已被销毁，清空相关内容
created 与 mounted 的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
mounted 与 methods 的区别mounted 是生命周期方法之一，会在对应生命周期时执行。
methods 是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，只执行逻辑，返回值可有可无。
computed 与 watched 的区别
computed 是计算属性，也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发，且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。
watched 属性是手动定义的所需监听的值，不同的数据可以在其中多次定义监听值，这时会消耗一定性能，他并不能像computed那样自动改变。
* 代表无序列表
安装图片缩略图的插件
npm i vue2-preview -S 安装命令
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
examples
<template>
<div>
<div style="height: 1000px; background-color: pink;"></div>
<vue-preview
:list="list"
:thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
:previewBoxStyle="{border: '1px solid #eee'}"
:tapToClose="true"
@close="closeHandler"
@destroy="destroyHandler"
/>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 600
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
]
}
},
methods: {
// 即将关闭的时候，调用这个处理函数
closeHandler() {
console.log('closeHandler')
},
// 完全关闭之后，调用这个函数清理资源
destroyHandler() {
console.log('destroyHandler')
}
}
}
</script>
| 参数 | 说明 | 类型 | 必须 |
|---|---|---|---|
| list | 图片列表 | Array | 是 |
| thumbImageStyle | 缩略图的样式 | Object | 否 |
| previewBoxStyle | 缩略图容器的样式 | Object | 否 |
| tapToClose | 是否允许单击关闭 | Boolean | 否 |
| close | 监听预览窗口关闭的事件(关闭前触发) | Function | 否 |
| destroy | 监听预览窗口销毁的事件(关闭后触发) | Function | 否 |
边框阴影
box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)
区分this.$route是路由参数对象,params和query都属于它
其中:this.$router是一个路由的导航对象,用它可以方便的使用js实现路由的前进,后退,跳转到URL地址
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
//传值个子组件
<swip :images="images"></swip>
npm install -g @vue/cli
vue create
//引入jquery
import $ from 'jquery'
发送post请求
methods: {
research: function () {
//post请求远程资源
this.$http.post(
//请求的url
"http://www.hefeixyh.com/login.html",
//请求参数，不能以get请求方式写：{params: {userName: "root123", passWord: "root123"}}
{userName: "root123", passWord: "root123"},
//解决跨域问题，不加无法跨域
{emulateJSON: true}
).then(
function (res) {
console.log(res);
this.msg = res.bodyText;
},
function (res) {
console.log(res.status);
}
);
}
}
发送get请求
$http.get('api/url-api').then(successCallback, errorCallback);
function successCallback(response){
//success code
}
function errorCallback(error){
//error code
}
使用钩子函数控制动画
<!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="./lib/vue-2.4.0.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 1. 使用 transition 元素把 小球包裹起来 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease'
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag
}
}
});
</script>
</body>
</html>
vuex
是vue配套的公共管理工具,他可以共享的数据,保存到vuex中,方便整个程序任何组件直接修改我们的公共数据
vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex上,而不必通过父子组件之间传递了,如果组件的数据不需要共享,此时这些不需要共享的私有数据,没有必要放到vuex中
只有共享的数据,才有权利放到vuex中,只有共享的数据,才有权利放到vuex中,组件内部私有的数据,只要放到data中即可
props和data和vuex的区别
vuex就相当于一个数据的仓库
import Vue from 'vue'
import App from './App.vue'
//配置vuex的步骤
//1.运行cnpm i vuex -S
//2.导入包
import Vuex from 'vuex'
Vue.use(Vuex)
//3.注册vuex到vue中
var store = new Vuex.Store({
state:{
//可以把state想象成组件中的data
count:0
},
mutations:{
//可以把mutations想象成methods
}
})
Vue.config.productionTip = false
const vm = new Vue({
render: function (h) { return h(App) },
store:store,
router:router
}).$mount('#app')
如果要修改store中的值,只能通过调用mutation提供的方法,才能操作对应的数据,不推荐直接操作state中的数据,因为,万一导致数据的紊乱,找问题不好排查,不能快速定位到问题的原因
只能通过mutation中的方法才能排查到原因
increment(state){
state.count++;
}
//如果组件想要调用mutation中的方法,只能使用this.$store.commit('方法名')
//这种调用mutation方法的格式,额this.$store.commit("increment");
//mutation 的方法中,最多支持两个参数,第一个参数是状态,第二个事传递的值
getters:{
//注意,getters只负责向外提供数据,不负责修改数据,如果想要修改state中的数据请找mutations
optCount:function(state){
return '当前最新的count值是:' +state.count
}
//经过回顾对比,发现getters中的方法和组件中的过滤器比较类似,因为过滤器和getters都没有修改元数据
// 都是把元数据做了一层包装,提供给调用者
//其次getters也和computed比较像,只要state中数据发生变化了,那么,如果getters正好引用这个数据,就会触发getters重新求值
}
1.如果需要修改,必须提调用mutations中统一定义的方法来进行修改
2.如果store中state上的数据,在对外提供的时候,需要做一层包装,那么,推荐使用getters如果需要getters的方法则使用this.$store.***调用
getters里面的方法是相当于监听,只要state里面的数据改变就会计算一次,相当于计算属性,computed
当购物车的数据,更新后,存在localstorage里面,做刷新不重置
webpack 打包
ngrok 映射外网
网友评论