Vue框架学习（一）
一、Vue简介
1.定义
Vue是一个基于JavaScript的渐进式框架。渐进式：可以控制一个页面的一个标签、一系列标签、也可以控制整个页面，甚至控制整个前台项目
2.vue的优势
有指令（分支结构，循环结构），复用页面结构
有实例成员（过滤器、监听），可以对渲染的数据做二次格式化
有组件（模块的复用和组合），可以快速搭建页面
3.三大前端框架
- Angular （庞大）
- React （常用于移动端）
- Vue （吸取两者优势、轻量级）文档是中文
二、Vue环境搭建
"""
1）cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>
2）本地导入
<script src="js/vue.js"></script>
"""
三、挂载点
Vue对象中，el表示挂载点
1.一个挂载点只能控制一个页面结构
2.挂载点挂在的页面标签严格建议使用id属性进行匹配
3.html标签与body标签不能作为挂载点
4.可以选择用变量去接受实例化的vue对象
四、插值表达式
1.空插值表达式 {{ }},需要有空格
2.{{ }}中渲染的变量需要在data中初始化
3.插值表达式可以进行简单运算
4.插值表达式与其他模版语法冲突时，可以用delimiters自定义
可以将delimiters插值表达式改为标识符为[{ }]。
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : '#app',
data : {
nums:[1,2,3,4]
},
delimiters:['[{','}]']
})
</script>
插值表达式里可以调用属性、方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='app'>
<p>{{ nums[3] }}</p>
<p>{{ }}</p>
<p>{{ a + b }}</p>
<p>{{ a + b * 2}}</p>
<p>{{ msg.length + a }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : '#app',
data : {
a : 1,
b : 2,
msg : 'hello world',
nums:[1,2,3,4]
},
// delimiters:['[{','}]']
})
</script>
</html>
五、过滤器
1.用实例成员filters来定义过滤器
2.在页面结构中，用|来标识并调用过滤器
3.过滤方法的返回值就是过滤器过滤后的结果
4.过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量。过滤器方法接收参数时按照传入的位置从左到右。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ a,10|add|mutilply(10,20)}}</p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el : "#app",
data : {
a : 1
},
filters:{
add : function(a,b){
return a + b
},
mutilply : function(a,b){
return a * b
}
}
})
</script>
</html>
# 过滤器可以串联使用，从左到右执行。上一个过滤器的结果会当做下一个过滤器的参数传入。如果参数不够，则参数为undefined。如果参数太多，则多余的参数不会被接收。
<p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
六、文本指令
1.v-*是vue指令，会被vue解析，v-text="num"中的num表示一个变量，如果在data中未定义num，则会报错。v-text="'num'"，则表示字符串。
2.v-text是原样输出渲染内容。
3.v-html可以解析渲染html语法的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
<p v-text="'msg'"></p>
<p v-text="true"></p>
<p v-text="false"></p>
<p v-text="111"></p>
<p v-html="msg_html"></p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
let app = new Vue({
el:"#app",
data:{
msg : 'hello world',
msg_html: "<h1>hello world</h1>"
}
})
</script>
</html>
七、js对象内容补充
1.js没有字典类型，只有自定义对象，可以完全替代字典来使用。
2.js中对象的属性名，都采用自字符串类型，所以就可以省略字符串的引号
3.对象中属性值为函数时，称之为方法，方法可以简写为: 方法名(){}
4.如果对象的属性值是一个变量，且变量名与属性名相同，则可以简写{属性,}
let obj = {
'name' : "Bob",
'eat' : function(){
console.log("I'm eating...")
}
}
console.log(obj.name,obj['name'])
obj.eat()
简写
let obj1 = {
name:'Bob',
eat(){
console.log("I'm eating")
}
}
console.log(obj1.name,obj1['name'])
obj1.eat()
属性简写
let height = 180
let obj2 = {
height,
name:'Bob',
}
console.log(obj2.height,obj2.name)
JS中类的声明
prototype为类属性赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let obj = {
'name' : "Bob",
'eat' : function(){
console.log("I'm eating...")
}
}
console.log(obj.name,obj['name'])
obj.eat()
// 方法简写
let obj1 = {
name:'Bob',
eat(){
console.log("I'm eating")
}
}
console.log(obj1.name,obj1['name'])
obj1.eat()
// 属性简写
let height = 180
let obj2 = {
height,
name:'Bob',
}
console.log(obj2.height,obj2.name)
// js中声明一个类
class People{
constructor(name) {
this.name = name
}
eat(){
console.log(this.name + " is eating...")
}
}
let obj3 = new People('Kimmy')
let obj4 = new People('David')
console.log(obj3.name,obj3.school)
console.log(obj4.name,obj4.school)
obj3.eat()
obj4.eat()
People.prototype.school = 'OldBoy'
console.log(obj3.name,obj3.school)
console.log(obj4.name,obj4.school)
// 第二种声明方式
function Student(name){
this.age =18
this.name = name
this.fly = function(){
console.log(this.name + ' is flying')
}
}
let obj5 = new Student('Amy')
let obj6 = new Student('Daming')
console.log(obj5.name,obj5.age)
console.log(obj6.name,obj6.age)
obj5.fly()
obj6.fly()
</script>
</html>
八、js函数内容补充
函数的形参和调用时传入的实参关系：传入和接收的参数个数不需要一致，按位置进行赋值，不存在关键字参数，多余的实参不会被接收，没有被赋值的形参会被赋值为undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 函数定义1
function fn1(a,b){
console.log(a+b)
return a + b
}
fn1(1,10)
// 函数定义2
let fn2 = function(a,b){
console.log(a+b)
return a + b
}
fn2(1,10)
// 箭头函数
let fn3 = (a,b)=>{
console.log(a+b)
return a + b
}
fn3(1,10)
// 箭头函数只有一条语句时可以省去{}
let fn4 = (a,b)=>console.log(a*b +10)
fn4(1,10)
// 当形参只有一个时，可省略()
let fn5 = a => console.log(a*a)
fn5(10)
console.log(5)
console.log(10+ '5')
console.log('55555')
// 快速类型转换 字符串 ---> 数字类型
console.log(+'55555')
</script>
</html>
九、事件指令
* 一、数据驱动
* 1）操作是一个功能，使用需要一个方法来控制 2）方法名是变量，所以控制变量就可以控制该方法
*
*
* 二、事件指令
* 1）在实例成员methods中声明事件方法
* 2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名" eg: <button v-on:click="btnClick">按钮</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 直接绑定事件名默认传入事件对象 -->
<button v-on:click="my_click">{{ btn }}</button>
<!-- 加括号手动传入参数,$event可传入事件对象-->
<p>{{ num }}</p>
<p v-text="msg"></p>
<button v-on:click="increase(btn1,$event)">{{ btn1 }}</button>
<button v-on:click="decrease(btn2,$event)">{{ btn2 }}</button>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
num: 0,
btn:'点我',
btn1:'增加',
btn2:'减少',
msg:'',
},
methods:{
my_click(ev){
console.log(ev)
},
increase(btn,ev){
this.num++
this.msg = '你点击了' + btn
console.log(ev.clientX,ev.clientY)
},
decrease(btn){
this.num--
this.msg = '你点击了' + btn
}
}
})
</script>
</html>
