这篇主要记录了在使用过程的当中,对于vue的一些方法的理解

1.Vue生命周期中mounted和created的区别

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

例子

  1. <span style="font-size:14px;">Vue.component("demo1",{
  2. data:function(){
  3. return {
  4. name:"",
  5. age:"",
  6. city:""
  7. }
  8. },
  9. template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
  10. created:function(){
  11. this.name="唐浩益"
  12. this.age = "12"
  13. this.city ="杭州"
  14. var x = document.getElementById("name")//第一个命令台错误
  15. console.log(x.innerHTML);
  16. },
  17. mounted:function(){
  18. var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size:14px;">
  19. console.log(x.innerHTML);
  20. }
  21. });
  22. var vm = new Vue({
  23. el:"#example1"
  24. })</span>

可以看到输出如下:

可以看到都在created赋予初始值的情况下成功渲染出来了。
但是同时看console台如下:
可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。
 
 
 
二 、异步加载之后的回调函数的使用

最近,在项目中要使用Swiper做一个移动端轮播插件。需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为。解决这个问题,我们通过在组件中使用vm.$nextTick来解决这一需求。

1、在数据调用结束后再进行swiper初始化

 //调用接口查询需要循环的商品
this.$http.get('../../../static/json/foodkind.json').then((res) => {
this.foodArr = res.data.foodkind;
// $nextTick,它会在数据变化以后,DOM更新以后进行回调函数
this.$nextTick(function() {
new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
})
}, (res) => {
console.log("error");
})

这里还要用到$nextTick,它会在数据变化以后,DOM更新以后进行回调函数,不然的话轮播还是会出现错乱的情况

总结:

* `Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
* `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

 三 vue的跨域解决

我们在项目中,有的时候会遇到vue的跨域问题,这个时候我们要么使用jsonp的形式获取,要么使用配置vue的proxy代理的方式,前者,我还没研究懂,现在先介绍配置proxy代理的方式

dev: {
env: require('./dev.env'),
port: ,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/**': {
target: 'http://api.douban.com/v2', //表示你跨域请求的接口的域名
secure: false, //如果是https接口,需要配置这个参数
changeOrigin: true, //如果接口跨域,需要进行这个参数配置
 pathRewrite: {
 '^/api': ''
 }
},
'/users/*': {
target: 'http://127.0.0.1:8089'
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
} 在main.js当中可以配置一个公共的路由路径
axios.defaults.baseURL = '';
或者可以在调用该接口的时候,直接使用加上/api
 

四  proos的简单用法

使用 props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:

1
2
3
4
5
6
7
Vue.component('child', {
 // 声明 props
 props: ['msg'],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: '<span>{{ msg }}</span>'
})

然后向它传入一个普通字符串:

<child msg="hello!"></child>

举例

错误写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
 
<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>
 
<body>
<pre>
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误
 
 
</pre>
<div id="app1">
 <child mssage="hello!"></child>
</div>
<script>
 Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
 data: function() {
 return {
 mssage: 'boy'
 }
 }
 });
 var vm = new Vue({
 el: '#app1'
 })
</script>
</body>
 
</html>

正确写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
 
<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>
 
<body>
<pre>
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误
 
 
</pre>
<div id="app1">
 <child mssage="hello!"></child>
</div>
<script>
 Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
 });
 var vm = new Vue({
 el: '#app1'
 })
</script>
</body>
 
</html>

props 传入多个数据(顺序问题)

第一种:

HTML

1
2
3
4
5
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var vm = new Vue({
el: '#app1'
})

结果:hello! hello1! hello2!

第二种:

HTML

1
2
3
4
5
<div id="app1">
<child msg="hello!"></child>
 <child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var vm = new Vue({
el: '#app1'
})

结果:123hello! 123hello1! 123hello2!

第三种:

HTML

1
2
3
4
5
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var vm = new Vue({
el: '#app1'
})

结果:hello! 123 hello1! 123 hello2!123

第四种:

HTML

1
2
3
4
5
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var vm = new Vue({
el: '#app1'
})

结果:hello! 123 123hello1! 123hello2!

结论:

在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:
1-在最前面加入—每个子组件渲染出来都会在其前面加上

2-在最后面加入—每个子组件渲染出来都会在其后面加上

3-在中间加入—他前面子组件后面加上,后面的子组件后面加上

 五 proos的简单用法

ps:App.vue 父组件

  Hello.vue 子组件

ps:App.vue 父组件
  Hello.vue 子组件 <!--App.vue :--> <template>
  <div id="app">
    <hello @newNodeEvent="parentLisen" />
  </div>
</template> <script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script> <!--Hello.vue :--> <template>
  <div class="hello">
    <input type="button" name="" id="" @click="chilCall()" value="子调父" />
  </div>
</template> <script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>

VUE简单的语法的更多相关文章

  1. vue(2)—— vue简单语法运用,常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  2. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  3. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  4. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  5. Vue 简单的总结一

    let 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 const 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 4. 只能声明常量,不可变得量 th ...

  6. vue 的基本语法

    一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) vue   :  作者尤雨溪, 渐进式的JavaScript 框架 react :  Faceb ...

  7. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  8. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  9. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

随机推荐

  1. [LeetCode] 41. First Missing Positive 首个缺失的正数

    Given an unsorted integer array, find the smallest missing positive integer. Example 1: Input: [1,2, ...

  2. [LeetCode] 12. Integer to Roman 整数转化成罗马数字

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  3. k8s学习路线

    1. 核心概念说明 http://dockone.io/article/932 https://www.centos.bz/2017/08/k8s-kubernetes-architecture-di ...

  4. AtCoder Grand Contest 036 简要题解

    从这里开始 比赛目录 Problem A Triangle 考虑把三角形移到和坐标轴相交,即 然后能够用坐标比较简单地计算面积,简单构造一下就行了. Code #include <bits/st ...

  5. python 利用淘宝IP库 查询IP归属地

    #coding:utf-8 from django.test import TestCase import json import urllib ip = "114.114.114.114& ...

  6. 工作中常用的Linux命令介绍与实践

    前言 做后端开发的同学,一般都会接触到服务器,而我们现在的系统用的比较多的服务器系统就是linux了,平时多多少少也会接触到一些linux下的shell命令.我们来介绍下linux一些常用的命令和使用 ...

  7. java ssh免密登录

    package com.meituan.stabletest.sshtest; import java.io.InputStream; import com.jcraft.jsch.Channel; ...

  8. 实验二 Java基础(数据/表达式、判定/循环语句)

    实验二 (一)实验内容 编写简单的计算器,完成加减乘除模运算. 要求从键盘输入两个数,使用判定语句选择一种操作,计算结果后输出,然后使用判定和循环语句选择继续计算还是退出. 编写测试代码,测试验证. ...

  9. python运维开发常用模块(一)psutil

    1.模块简介 psutil是一个跨平台库(http://code.google.com/p/psutil/),能够轻 松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网 络等)信息.它主 ...

  10. debian系统配置

    使用腾讯docker源 sudo sed -i 's/deb.debian.org/mirrors.cloud.tencent.com/g' /etc/apt/sources.list sudo se ...