1.初识Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 双括号里写js表达式，注意区分表达式和代码
1.一个表达式可以生成一个值，放在任何一个需要值的地方
拿一个变量的可以接到表达式的值，例子 a,a+b,.demo(1)
2.代码，例子 if(){},for(){}
3.真实开发中只有1个vue实例，并且会配合着组件一起使用
-->
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
//创建vue实例，一个Vue实例只能对应一个容器！！
var x=new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器
data:{//data中用于存储数据，数据供el所指定的容器使用
name:'cc'
}
})
</script>
</body>
</html>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<!-- Vue指令，bind，绑定，v-bind:可以简写为:
功能：用于解析标签，
举例：v-bind:href="xxx"，xxx同样写js表达式 -->
<a href="#">点我去{{school.name}}学习</a>
<a :href="url">点我进入百度</a>
</div>
<script>
var x=new Vue({
el:"#root",
data:{
name:"cc",
url:'http://www.baidu.com',
school:{
name:233
}
}
})
</script>
数据绑定
<div id="root"> ## el和data的两种写法
单向数据绑定：<input type="text" v-bind:value="name">
双向数据绑定：<input type="text" v-model="name">
<!-- v-model只能应用在表单类元素，（能输入，有value值），注意简写写法 -->
</div>
<script>
var x=new Vue({
el:"#root",
data:{
name:"cc",
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<!-- data与el的两种写法
1.el的两种写法（1），.new Vue时配置el属性
（2），先创建Vue实例，后通过vm.$mount('#root')指定el的值
2.data有两种写法
（1）对象式
（2）函数式
3.Vue所管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是实例了，变成Window-->
<script>
var x=new Vue({
//el:"#root",//第一种写法
//data的第一种写法，对象式
// data:{
// name:"cc",
// }
//data的第二种写法：函数式（Vue调用的，此处this是Vue实例对象）
data:function(){
return{
name:"cc"
}
}
})
x.$mount('#root')//第二种写法
</script>
</body>
</html>
理解MVVM
-
M：模型Model：对应data中的数据
-
V：视图：模板
-
VM：视图模型：Vue实例对象
Object.defineProperty方法
//Property属性
//Object.defineProperty
let number=18
let person={
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//value:18,
enumerable:true,//控制属性是否可以枚举
writable:true,//控制属性是否可以修改
configurable:true,//控制属性是否可以被删除
//想让person增加age属性，属性值为number，可随着number更改而变化
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get:function(){
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
number=value
},
})
//Object.keys(person)可以将传入的对象属性名遍历出来，形成一个数组
// Object.defineProperty通过这个方法加入的属性不可枚举(不可遍历)，不可更改,可加入 enumerable:true使其可以遍历
数据代理
<!--
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作(读/写)
2. Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到cn上，
为每一个添加到cn上的属性都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
-->
<script>
const cn=new Vue({
el:'#root',
data:{
name:'ss',
address:'广东',
}
})
//cn._data就是cn中的data
</script>
事件处理
<div id="root">
<h1>你好，{{name}}</h1>
<button @click="showInfo">点我提示</button>
<!-- v-on:可简写成@ -->
<button @click="showInfo2(66,$event)">点我提示2(传参 )</button>
</div>
<!-- 事件的基本使用：
1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名：
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不要用箭头函数，否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象：
5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参 -->
<script>
const vm=new Vue({
el:"#root",
data:{
name:'cc',
},
methods:{
showInfo(event){
//console.log(this)//此处的this是vm
alert('hello')
},
showInfo2(number,a){
//console.log(this)//此处的this是vm
alert(number)
console.log(a)
alert('hello')
}
}
})
</script>
事件修饰符
<div id="root">
<h1>你好，{{name}}</h1>
<a href="http://www.baidu.com"@click.prevent="showInfo">点我提示信息</a>
</div>
<!--
Vue中的事件修饰符：
1.prevent：阻止默认事件 *
2.stop：阻止事件冒泡 *
3.once：事件只触发一次 *
4.capture：使用事件的捕获模式(先捕获再冒泡)
5. self：只有event.target是当前元素才触发事件
6.passive：事件的默认为立即执行，无需等待回调执行完毕
-->
可连着写，例如@click.prevent.stop组织冒泡并不允许跳转
键盘事件
<div id="root">
<h1>你好，{{name}}</h1>
<input type="text" placeholder="按下回车提交" @keyup.enter="showInfo">
</div>
若想只按下ctrl+y触发，可以写成@keyup.ctrl.y
<!--
1.Vue中常用到的按键别名
1.回车=>enter
2.删除=>delete(捕获'删除'和'退格'键)
3.退出=>esc
4.空格=>space
5.换行=>tab (配合keydown适用)
6.上=>up
7.下=>down
8.左=>left
9.右=>right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但需要注意转为kebab-case(短线命名)，两个单词组成的，如capslock要写成caps-lock
3.系统修饰键(用法特殊)：ctrl，alt，shift，meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2).配合keydown使用：正常触发事件
4.也可以通过keyCode(不推荐，以移除)
-->
计算属性
<div id="root">
<h1>你好，{{name}}</h1>
姓<input type="text" v-model="firstname">
名<input type="text" v-model="lastname">
全名：<span>{{fullname}}</span>
</div>
<!--
计算属性：
1.定义：要用的属性不存在，要通过已有的属性计算得来
2.原理：底层借助了Object.defineproperty方法提供gatter和setter
3.get函数什么时候执行？
(1).初次调用时
(2).当依赖数据更改时
4.优势：与methods相比，内部缓存机制(复用)，效率更高，调式方便
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
-->
<script>
const vm=new Vue({
el:"#root",
data:{
firstname:'cc',
lastname:'yy',
},
computed:{
fullname:{
//此处的this是vm
//get什么时候调用？1，初次读取时调用。2，所依赖的数据改变时发生调用(比如此处firstname和lastname改变时调用)
get(){
return this.firstname+'-'+this.lastname
}
}
}
})
//computed计算
</script>
计算属性简写
确定只读不改，才能用简写
computed:{
fullname:function(){
return this.firstname+'-'+this.lastname//function当get用
}
}