Vue ------学习笔记（一）
Vue 基础入门（一）：
1、 是啥 ：一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，便于与第三方库或既有项目整合。
通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量，与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！
vue是一个无论项目大小都可以满足开发需求的框架
‘ vue做了必须的事，又不会做职责之外的事 ’
2、用处：代码灵活复用。
因为：Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM
3、 相关背景知识：
MVVM ：即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。
4、vuejs生命周期函数：
生命周期函数就是vue实例在某一个时间点会自动执行的函数
当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤
- Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同
1.beforeCreate 实例创建之前调用， 数据没有挂载，不能访问数据
vue实例初始化的时候就被执行（数据加载之前执行的一个函数，拿不到data里面的数据）
2.created 实例创建之后调用,能访问、修改数据，单修改数据不会触发updated函数 在这里可以向服务器请求数据，（也可以拿到父组件的数组进行修改等操作，这一步骤是没有操作到模板，数据和模板还没有结合）
下一步就是开始找模板，找不到的话就把el接管的div作为模板，如果有模板就会渲染模板
3.beforeMount 编译模板已经完成（模板和数据都已经准备就绪了） 虚拟dom已经存在 还没有进行进行渲染。
也能修改数据，但是修改数据不会触发update函数（组件不卸载，只能执行一次）
4.render 渲染是vue自动完成的。如果手动写render函数，渲染的东西
就会把 vue自动渲染的东西覆盖调。
5、 mounted 真实的dom元素已经存在, 可以获取节、修改数据，而且修改数据会触发update函数（页面已经渲染，替换了之前的dom元素）。
6、 beforeUpdate 数据更新之前触发（数据更新：就是dom上的数据发生变化）。
7、. updated 数据修改后执行 修改数据要可能造成死循环（在这里尽量不要修改数据）。
8、 beforeDestroy 销毁之前 要做一些清理工作，防止内存泄漏。
9、 activated keep-alive **动态组件时调用。
10、deactivated keep-alive 卸载动态组件时调用（已经销毁的时候执行）。
5、计算属性：computed
- **作用：**为了解决 模板用于简单运算，在模板中放入太多的逻辑会让模板过重且难以维护。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
- 计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
基础语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<div id="app-6">
<todo-item></todo-item>
<p>{{ message }}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
</body>
<script>
// var app = new Vue({
// el: '#app',//告诉当前vue应用，模版在哪里
// data: { //存放vue应用额数据
// message: '我孤独啊！好孤独！'
// }
// })
//v-bind:动态的把数据绑定接的那个dom的属性 ，指令
// var app2 = new Vue({
// el: '#app-2',
// data: {
// message: '页面加载于，我好难啊！ '
// }
// })
// var app3 = new Vue({
// el: '#app-3',
// data: {
// seen: true
// }
// })
// var app4 = new Vue({
// el: '#app-4',
// data: {
// todos: [
// { text: '学习 JavaScript' },
// { text: '学习 Vue' },
// { text: '整个牛项目' }
// ]
// }
// })
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {// 存放事件的回调函数，回调函数的this默认指向当前实例
reverseMessage() {
//回调函数的this == 当前vue实例
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>
模板语法
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red{
color: red
}
</style>
</head>
<body>
<div id="app">
<span v-once> {{ msg }} </span>
<span v-html="span"></span>
<p v-bind:id="id">我的ID值是变量哦！</p>
<p :id="id">我的ID值是变量哦！</p>
<p v-if="show">看的到我吗？最美的一刻。</p>
<button v-on:[eventname]="handleClick">显示最美时刻</button>
<input type="text" @keyup.enter="handleClick">
</div>
</body>
<script>
/*
Vue也会把模版编译成render return 虚拟dom，就和我们写jsx是一样的
v-once:变量在节点值渲染一次，以后更新不管
v-html：把字符串解析成dom节点
v-bind:用来绑定属性值的，属性值为变量的时候，在属性的前面添加
{{ 在表示式内部，只能使用一元运算符，三目运算符，函数的调用，不能JS语法 if var for 。。。 }}
指令：凡是以v-开头的特殊属性（attribute）.
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 大白话：指令就是帮我们做DOM操作的。
指令的参数：指令后面通过冒号链接的 称为 参数，对指令加以描述(限制的) v-on:click click就是参数的意思
指令的修饰符：在参数后面，通过.连接的 称为 修饰符
简写 v-bind：直接去掉，保留：
v-on: @
*/
var app = new Vue({
el:"#app",
data:{
msg:"通过vue重拾信心",
span:`<span class="red">wocao 只是感叹词</span>`,
id:"CD001",
show:false,
eventname:"mouseenter"
},
methods: {
handleClick(){
this.show = !this.show
}
},
})
</script>
</html>
计算属性：
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ revermsg }}</p>
<p>{{ revermsg }}</p>
<p>{{ revermsg }}</p>
<p>名字：<input type="text" v-model="fullName"></p>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<hr>
<input v-model="question" placeholder="输入问好开始搜索？">
<p>{{ answer }}</p>
</div>
</body>
<script>
/*
问题：后台返回的数据通常需要处理后 显示给用户
1：表达式直接写函数 假如先有多个地方用到 这个处理的数据 维护成本高
2：methods里面的方法，在表达式中调用，解决维护 ？函数被多次调用
有没有一种办法，当数据没有改变，函数只调用一次，通过能够监听依赖数据的改变
计算属性 ：
comptued
VS:方法调用--->1:计算属性能缓存数据，当在模板中，多次使用计算属性的时候，当依赖数据没有发生改变的时候，计算属性的回调函数不会被重新运算
VS:watch --->2:计算属性能监听多个依赖
3：有get：能获取计算属性的值，也有set还可以监听这个计算属性值的改变
缺点:计算属性内部，在函数题的最外层必须有return 算好的值，要返回回去，技术属性内部不能有异步
watch:监听属性 ，只能一个属性一个属性的监听，它只是监听执行回调函数而已。
*/
function debounce(fn,delay){ //fn真正执行的函数，delay间隔时间
var timer = null;
return function(){
var args = arguments;
var that = this;
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(that,args)
},delay)
}
}
var app = new Vue({
el:"#app",
data:{
msg:"通过vue重拾信心",
firstName:"yang",
lastName:"jie",
question:"",
answer:"答案在这里显示！"
},
watch:{//配置属性监听
msg:function(newVal){ //key是 data里面你要监听的那个值，value回调函数，当msg的值改变的就会执行回调
console.log(newVal)
},
question:function(newVal){
this.answer = "用户输入中...";
//函数的防抖
this.getAnswerDebounce() //只有当question的值改变的时候，就调用了。希望的时候用户停止输入后才执行
}
},
computed: { //存放计算属性的地方
revermsg(){
console.log(2)
return this.msg.split('').reverse().join('') + "呵呵"
},
fullName:{
get(){
return this.firstName + ' ' + this.lastName
},
set(newVal){
var val = newVal && newVal.split(" ")
this.firstName = val[0]
this.lastName = val[1]
}
}
// fullName(){
// console.log(3)
// return this.firstName + ' ' + this.lastName
// }
},
mounted() {
this.getAnswerDebounce = debounce(this.getAnswer,500)
},
methods: {
getAnswer(){
var hasMark = this.question.indexOf("?");
if(hasMark==-1){
this.answer = "请输入问号查询..."
return
}
this.answer = "思考中..."
setTimeout(()=>{
this.answer = `你的问题是：${this.question},答案是：你好丑啊！`
},1500)
}
// reverMsg(){
// console.log(1)
// }
}
})
</script>
</html>
生命周期函数，钩子函数：
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script>
/*
vue应用 从new Vue开始，
所以data里面的数据都是响应式（数据的改变会触发视图的更新）
声明周期钩子函数：
create，mount，update，destroy
*/
var data = {
msg:"HI,boy"
}
// Object.freeze(data) //冻结，里面的属性值不能被修改了
var app = new Vue({
el:"#app",
data:data,
beforeCreate() {
console.log("beforeCreate，正在准备阶段");
},
created() {
console.log("created,准备好了")
},
beforeMount() {
console.log("beforeMount,模板初始化好了")
},
mounted() { //发请求，做dom操作
console.log("mounted,编译好的模版查到了真实的节点了")
},
beforeUpdate() {
console.log("beforeUpdate,当有数据data改变的，重新调用render之前")
},
updated() {
console.log("updated,render函数被调完，data数据更新了")
},
beforeDestroy() {
console.log("beforeDestroy,我要被销毁拉")
},
destroyed() {
console.log("destroyed,我被销毁拉,数据多不能使用啦")
},
})
app.$watch('msg', function (newValue, oldValue) { //监听data属性值的改变，执行回调函数
// console.log(newValue)
})
//data.show = "错的"
// app.show = "看的！" 错的
</script>
</html>
-------------------------------------------简要笔记-------------------------------------------------
VUE： (一)
vue是面向模板
react是面向 类
1、v-bind：on 动态的把数据绑到指定的dom 简写 v-on
v-seen： dom消失，出现， true，false
v-for： 迭代
v-on：click -----绑事件 简写 @
v-model： 表单数据的双向绑定
指令式作用在节点上的。
响应式：数据改变出发视图的改变
1、生命周期函数:
准备：create: beforeCreate, created
模板初始化好了:beforemont，monted
发异步请求
数据改变，调用render函数：beforupdate ，updated
数据销毁：beforedestory，destoryed
2、模板语法
vue会把模板编译成 render return 出虚dom
3、 指令：以V-开头的特殊属性
指令作用：以表达式的值得改变，响应式的作用改变dom的状态
指令修饰符：
v-once
v-html=‘span’
v-bind: ------绑定属性值为变量时
v-model： ------双向绑定
4、计算属性：
特点：
能够缓存数据，当在模板中，多次使用计算属性的时候
comptued
watch：计算属性能够监听多个依赖，监听属性，只能单个单个的监听，监听回调函数而已
get 与 set
缺点：
计算属性内部，计算属性外部不能有异步
-------------------疑问，
在哪里发异步请求
上一篇： 一段刁钻古怪的PHP代码
下一篇： 用php生成上传图片的缩略图问题