VUE进阶（组件、模板语法、axios）学习和实操
1.前言
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
2.创建前端空间
定义一个名为 button-counter 的新组件
3.定义组件
Vue.component(‘button-counter’, {
data: function () {
return {
count: 0
}
},
template: ‘You clicked me {{ count }} times.’
})
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
否则，复用组件会同步数据【采用数据传输的话】。
4.注册（实例）组件
5.效果
6.自定义化实现
7.VUE实例
var vm = new Vue({
// 选项
})
8.Vue数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el:”#app”
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
8.1.实际
8.2.结果
2体现了：实例化后的属性的值发生改变时，视图将会产生“响应”。
8.2.1.备注
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
8.2.2.修改属性
Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
vm.
vm.data===data//=>truevm.el === document.getElementById(‘example’) // => true
//
vm.watch是一个实例方法vm.watch(‘a’, function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
9.生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
new Vue({
data: {
a: 1
},
created: function () {
// this 指向 vm 实例
console.log('a is: ’ + this.a) // => “a is: 1”
}
})
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
10.Vue模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
10.1.文本
10.1.1.{{msg}}
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
{{a}} ------ {{b}}
10.1.2.V-once
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
这个将不会改变: {{ msg }}
10.1.3.v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
Using mustaches: {{ rawHtml }}
Using v-html directive:
这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
10.1.4.Attribute
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
10.1.5.使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(’’).reverse().join(’’) }}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
10.2.指令
10.2.1.绑定属性
10.2.1.1.V-bind
…
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
10.2.1.2.V-on
另一个例子是 v-on 指令，它用于监听 DOM 事件：
…
10.3.动态绑定
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
…
…
<a :[key]=“url”> …
10.4.2.v-on 缩写
…
<a @click=“doSomething”>…
<a @[event]=“doSomething”> …
11.AJax
11.1.前言
2.0后的VUE官方推荐采用axios的方法进行ajax使用。
11.2.Get
new Vue({
el: ‘#app’,
data () {
return {
info: null
}
},
mounted () {
axios
.get(‘https://www.runoob.com/try/ajax/json_demo.json’)
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
11.3.Get传参
GET 方法传递参数格式如下：
传递参数说明
// 直接在 URL 上添加参数 ID=12345
axios.get(’/user?ID=12345’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 设置参数：
axios.get(’/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
11.4.多个并发请求
执行多个并发请求
实例
function getUserAccount() {
return axios.get(’/user/12345’);
}
function getUserPermissions() {
return axios.get(’/user/12345/permissions’);
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
以上是 VUE进阶（组件、模板语法、axios）学习和实操 的全部内容， 来源链接： utcz.com/z/377960.html
