VUE简单的语法

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

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

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。

例子

<span style="font-size:14px;">Vue.component("demo1",{
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
created:function(){
this.name="唐浩益"
this.age = "12"
this.city ="杭州"
var x = document.getElementById("name")//第一个命令台错误
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name")/</span>/第二个命令台输出的结果<span style="font-size:14px;">
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})</span>

可以看到输出如下：

可以看到都在created赋予初始值的情况下成功渲染出来了。

但是同时看console台如下：

可以看到第一个报了错，实际是因为找不到id，getElementById(ID) 并没有找到元素，原因如下：

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了结果“唐浩益”。

二、异步加载之后的回调函数的使用

Vue项目使用swiper做轮播图时，异步调用数据时导致图片不能滑动的解决方法

最近，在项目中要使用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：

Vue.component('child', {

// 声明 props

props: ['msg'],

// prop 可以用在模板内

// 可以用 `this.msg` 设置

template: '<span>{{ msg }}</span>'

})

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

举例

错误写法：

<!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>

正确写法：

<!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

<div id="app1">

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

<child nihao="hello1!"></child>

<child nisha="hello2!"></child>

</div>

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

<div id="app1">

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

<child nihao="hello1!"></child>

<child nisha="hello2!"></child>

</div>

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

<div id="app1">

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

<child nihao="hello1!"></child>

<child nisha="hello2!"></child>

</div>

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

<div id="app1">

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

<child nihao="hello1!"></child>

<child nisha="hello2!"></child>

</div>

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简单的语法的更多相关文章

vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解一.总结一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
Vue 简单的总结一
let 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 const 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 4. 只能声明常量,不可变得量 th ...
vue 的基本语法
一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) vue : 作者尤雨溪, 渐进式的JavaScript 框架 react : Faceb ...
vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
Vue简单基础 + 实例及组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

随机推荐

Linux DNS分离解析与构建智能DNS服务器
一构建DNS分离解析方法一 : [root@localhost ~]# vim /etc/named.conf [root@localhost ~]# cd /var/named/ [root@l ...
MySQL实战45讲学习笔记：第十二讲
一.引子平时的工作中,不知道你有没有遇到过这样的场景,一条 SQL 语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. ...
DVWA XSS (DOM) 通关教程
DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容.结构以及样式. DOM型XSS其实是一种特殊类型的反射型XSS,它是 ...
热情组——项目冲刺 Day7
项目相关作业相关具体描述班级班级链接作业要求链接地址团队名称热情组作业目标实现软件制作,以及在福大的传播 Github链接链接地址 SCRUM部分: 成员昵称昨日目标开始时间 ...
SpringBoot第十篇：thymeleaf详解
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10931435.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 Sprin ...
阿里云ECS服务器CentOS7.2安装Python2.7.13
阿里云ECS服务器CentOS7.2安装Python2.7.13 yum中最新的也是Python 2.6.6,只能下载Python 2.7.9的源代码自己编译安装. 操作步骤如下: 检查CentOS7 ...
提高性能，MySQL 读写分离环境搭建
这是松哥之前一个零散的笔记,整理出来分享给大伙! MySQL 读写分离在互联网项目中应该算是一个非常常见的需求了.受困于 Linux 和 MySQL 版本问题,很多人经常会搭建失败,今天松哥就给大伙举 ...
【CTS2019】珍珠（生成函数）
[CTS2019]珍珠(生成函数) 题面 LOJ 洛谷题解 lun题可海星. 首先一个大暴力$sb$的$dp$是设$f[i][S]$表示当前考虑完了前$i$个珍珠,$S$集合中这 ...
【01】Saltstack：从零开始 Saltstack
写在前面的话最近一直都在整理以前的乱七八糟的笔记,所以会有很多老旧的东西都会被拉出来重新遛遛.算是再度系统的进行学习. 关于 Saltstack 的一些概念 Saltstack 是基于 Python ...
Queue接口分析：add和offer区别，remove和poll方法到底啥区别
Queue接口: public interface Queue<E> extends Collection<E> { /* * add方法,在不违背队列的容量限制的情况,往队列 ...

VUE简单的语法

例子

使用 props 传递数据

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

随机推荐

热门专题