Vue学习(一)
概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方中文文档
学习vue我们必须之到它的7个属性
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，
Hello Vue
<div id="app">
{{ message }}
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
const vm = new Vue({
el : "#app",
data :{
message:"Hello Vue!"}<!--定义Vue对象，el（element）定位元素（id，class...）-->
})
script>
结果：
数据和 DOM 已经被建立了关联，所有东西都是响应式的打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
v-bind:attribute 指令
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，vue可用于操作dom
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
div>
（回顾html语法，title的作用是悬停文字显示）
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
Date().toLocaleString()方法是显示当前日期时间
vue v-bind绑定值与字符串拼接两种写法：
- :title="
字符串${xx}" - :title="‘字符串’ + xx"
条件与循环
用v-if控制切换一个元素是否显示
<div id="app-3">
<p v-if="seen">现在你看到我了p>
div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
script>
当在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
这表明v-if与语法中的if一样，当判断为真时才会执行后边的语句。类似的
v-for与for循环判断也是这种关系。
注意：for="todo in todos"这种for循环方式，表示遍历数组todos中的每一项
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
script>
在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。
事件
用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1button>
<p>The button above has been clicked {{ counter }} times.p>
div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
v-on:click=""监听鼠标点击，如果点击则执行后边的程序counter+=1；
点击按钮，下边自动+1
对于较为复杂的响应事件，v-on:click=""可以直接跟方法名
<div id="example-2">
<button v-on:click="greet">Greetbutton>
div>
方法定义在vue的methods属性中
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
// `event` 是原生 DOM 事件
alert('Hello ' + this.name + '!')
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!
v-model进行表单数据双向绑定
<div id="app5">
<input type="text" v-model="message">{{message}}
div>
var app5 = new Vue({
el:'#app5',
data:{
message:""
}
})
Vue的组件
组件是可复用的 Vue 实例，类似于Vue形式 的一个对象
构建格式：
Vue.component(‘组件名’，{template:元素})
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，所以组件复用时不至于相互影响。
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
tmplate是HTML的一个模板元素（可嵌套）
定义了这个名为button-counter的组件以后，我们就可以把它当作html中的特定标签的格式来使用：
<div id="components-demo">
<button-counter>button-counter>
div>
完成元素的vue绑定，只需要new一个Vue对象：
new Vue({ el: '#components-demo' })
网页效果：
通过 Prop 向子组件传递数据：
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中，
简单一句话，props是用来向组件提交信息的：
Vue.component('blog-post', {
props: ['title'],
template: '{{ title }}
'
})
构建组件的时候，参数title是未知的，使用props来接受JS传递的参数，然后在html中使用该组件的时候就给组件赋值了参数
<blog-post title="My journey with Vue">blog-post>
<blog-post title="Blogging with Vue">blog-post>
<blog-post title="Why Vue is so fun">blog-post>
在更复杂的应用中，假如你使用该组件，包含一个参数数组，并想要为每篇博文渲染一个组件：
new Vue({
el: '#',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
这里的blog-post-demo是JS在调用组件时，给传递了数据posts，这样一个数组，数组中是三个对象，html中使用blog-post标签时，挂载到JS中，
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
>blog-post>
key是一个属性，用于元素的标记
.Vue文件
新建vue component文件，该文件后缀为.Vue
Axios异步通信
Axios异步通信
使用的json数据包：
{
"name": "haoyun",
"url": "https://www.baidu.com",
"page": 1,
"address": {
"street": "东咀",
"city": "珠海",
"country": "中国"
}
}
<body>
<div id="vue" v-clock>
{{info.address.street}}
{{info.name}}
<a v-bind:href="info.url">百度a>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
data(){
return{
info:{
name:null,
url:null,
page:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
/*钩子函数*/
mounted(){
axios.get("data.json").then(Response=>(this.info=Response.data));
}
});
script>
body>
Axios官网
计算属性
computed: {
//计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法
currentTime2: function () {
this.message;
// 返回一个时间戳
return Date.now();
}
}
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！
计算在虚拟dom中进行，计算结果在缓存中，不会随时间变化，当计算属性中的参数有更新时，虚拟dom清空，重新计算，这时计算属性才会发生变化。
注意计算属性是vue component的属性，可以用方法定义，但不可用作方法调用。
插槽
插槽的提出是为了实现合成组件，假定一个组件中大部分内容是固定的，仅有几个地方是需要变化更改的，我们就可以用插槽来代替这部分需要变化的，然后根据需要写相应的插槽组件
Slot的通俗理解是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑
有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；
假定一个组件：
<navigation-link url="/profile">
Your Profile
navigation-link>
其中：navigation-link的模板写为合成组件的形式：
<a
v-bind:href="url"
class="nav-link"
>
<slot>slot>
a>
当组件渲染的时候，slot标签将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML，也可以是其他组件
具体见Vue文档插槽
下边给一个插槽使用的具体例子，可以看到的是视图层使用了插槽后，就是一个框架模板，不包含任何静态数据，真正类似html的标签，使用的插槽具体形式在后边定义插槽组件，最后渲染的时候，props接受数据，传递给插槽组件，再传给合成组件，最后渲染网页元素。
自定义事件内容分发
主要是组件与Vue实例之间的数据传输问题，组件中某些方法也需要参数传递，然而实际中参数只能由Vue实例向视图层传输。
为了实现组件与Vue实例之间的数据传输：
- 先将视图层与Vue实例数据绑定，视图层的方法与Vue实例绑定。
- 组件中使用props接受视图层传递的数据，使用自定义事件编写组件的methods，语法：methods:{
自定义事件名:function{
自定义事件名this.$emit(‘自定义事件名’, [参数])
}
}
在组件中完成方法构建。
这样一来，视图层的数据、方法与Vue实例绑定，通过视图层这个中介，实现组件接收Vue实例中的数据。
示例
Vue-cli
Vue-cli是官方提供的项目实现脚手架，预先给出很多Vue项目的模板文件，供开发者在模板的骨架上快速进行项目开发。