vue框架：框架简介，基础实例成员，基础指令，js对象方法补充
1.指令
2.实例成员
3.组件
4.项目开发
1)定义：JavaScript渐进式框架
? 渐进式：可以控制一个页面的一个标签，也可以控制一系列的标签，也可以控制整个页面，甚至可以控制整个前台项目
2）优势：
? 有指令（分支结构，循环结构...） 复用页面结构等
? 有实例成员（过滤器，监听）， 可以对渲染的数据进行二次格式化
? 有组件（模板的复用或组合），快速搭建页面
?
? 虚拟dom：所有文件加载到内存中
? 数据的双向绑定
? 单页面应用
? 数据驱动
3）为什么学习vue：
? 前台框架：Angular 庞大（facebook），React 移动端（gethub），vue 吸取前两者的优势，轻量级
? vue文档是中文
? 实现前后台分离开发，节约开发成本
ps：前后端分离与前后端不分离的区别
前后端分离：
? 后端只需要返回前端需要的数据即可，不再控制前端显示的效果，耦合度相对较低
? 优点：开发效率高，用户体验好 缺点：成本高，不利于SEO优化
前后端不分离：
? 前端页面看到的效果都是由后端控制的，由后端渲染页面或者重定向到其他页面，也就是后端需要控制前端的显示，这会导致前后端的耦合度很高
? 优点：节省资源，利于SEO优化 缺点：不利于维护，用户体验差
4）如何使用vue
? 简单使用
vue环境导入
<!-- cdn导入-->
<script src="https://cn.vuejs.org/js/vue.js"></script>
<!-- 本地导入-->
<script src="js/vue.js"></script>挂载点：
? el：挂载点
? 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）
? 2）挂载点挂在的页面标签严格简易用id属性进行匹配（一般习惯用app）
? 3）html标签与body标签不能作为挂载点
? 4）是否接收vue对象，是外界是否要有vue对象决定的app里面的东西，用app.$data.num
<div id="app">
<div class="d1">
abc
{{num}}
</div>
<div class="d1">
bbc
{{num}}
</div>
</div>
<div id="main">
{{n}}
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num:100
}
});
new Vue({
el: '#main' ,
data: {
n: app.num
}
});
console.log('12345');
console.log(app.$data.num)
</script>插值表达式：
? 1）空插值表达式：{{ }}
? 2）插值表达式中渲染的变量在data中可以初始化
? 3）插值表达式可以进行简单的运算和简单逻辑
? 4）插值表达式符号冲突解决，用delimiters自定义解决
<div id='app'>
<p>
{{}}
</p>
<p>
{{num+10}}
</p>
<p>
{{msg + num}}
</p>
<p>
[{ num }]
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
num:10,
msg:'message',
},
delimiters:['[{','}]'],
})
</script>过滤器filters：
? 1）用实例成员filters来定义过滤器
? 2）在页面结构中，用 | 来表示使用过滤器
? 3）过滤方法的返回值就是过滤器过滤后的结果
? 4）过滤器可以对1-n个对象进行过滤，同时还可以传入辅助的变量，过滤器方法接收参数是按照传入的位置先后
<body>
<div>
<!-- 简单使用：过滤的对象会作为参数传给过滤器 -->
<p>
{{ num | add(20) }}
</p>
<!-- 串联使用：将第一个过滤器结果作为参数传给第二个参数-->
<p>
{{ num | add(100) | jump(2) }}
</p>
<!-- 终极使用 -->
<p>
{{ n1,n2 | fn(99,77) }}
</p>
<!-- 最终使用-->
<p>
{{ n1,n2 | fn(99,77),n1,n2 | fn(100) }}
</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
num:10,
n1:66,
n2:88
},
filters:{
add:function (a,b){
return a+b
},
jump:function(a,b){
return a*b
},
fn: function(a,b,c,d){
return a+b+c+d
}
}
})
</script>文本指令：
? 1）v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的）
? 2）v-text是原样输出渲染内容，渲染控制的标签自身的内容会被替换掉
<p v-text="num">123</p> 123会被num替换掉
? 3）v-html可以解析渲染html语法的内容
? js中的基本数据类型：字符串，数字，布尔，undefined
这些类型可以直接展示
<body>
<div id="app">
<p>{{ num | add(300) }}</p>
<p v-text="num"></p>
<p v-text="num">123</p>
<p v-text="info"></p>
<p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100,
info: '<i style="color: red">info内容</i>'
},
filters: {
add: function (a, b) {
return a + b;
}
}
})
</script>js对象补充：
var dic_obj = {
? 属性： 值（数值，函数）
}
1) js没有字典类型，只有对象类型，对象可以完全替代字典来使用
2) js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
3）对象中属性值为函数时，称之为对象的方法，方法建议简写：
方法名（）｛
｝
4） 如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写{属性,}
var height = 180;
var p = {
height,
name: 'Jerry',
eat(){
}
};
console.log(p.name,p.height)5） js中声明类的方法
? 第一种：
class People{
constructor(name){
this.name = name
}
eat(){
console.log(this.name+ '在吃饭')
}
}
let p1 = new People('Bob');
let p2 = new People('Tom');
console.log(p1.name, p2.name);
p1.eat();? 第二种：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name){
this.name = name;
this.eat = function(){
console.log(this.name + '在吃饭')
}
}
let t1 = new Teacher('Myself');
t1.eat();6)类属性：
给类属性赋值，所有的对象都能访问
function Fn(){}
let f1 = new Fn();
let f2 = new Fn();
赋值类的属性
Fn.prototype.num = 100;
console.log(f1.num);
console.log(f2.num);
类似于单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num)js的函数补充
? 1）函数的形参与调用时传入的实参关系（你传你的，我接收我的）
? 传入和接收的参数个数不需要一致
? 但是一定按位进行赋值（没有关键字参数）
? 没有接收的实参会被遗弃，没有被赋值的形参为undefined
? 2）函数定义的演变
类似匿名函数
let fn2 = function (a,b){
return a+b;
}
省略关键字的箭头函数
let fn3 =(a,b) =>{
return a+b;
}
没有函数体，只有返回值的函数，可以省略作用域｛｝，由于只要返回值，所以return 也可以省略
let fn4 = (a,b) => a+b;
没有参数时
let fn4 = ( ) => a+b;
如果形参只有一个时，声明参数的（）也可以省略
let fn5 = num => num*num
弱语言
console.log(10 + '5') '105'
console.log(10 - '5') 5
先优先进行字符串运算，不行再数值运算
console.log(+'55555') 55555数据驱动：
? 对比dom驱动：1.js选择器获取目标 2.为目标标签绑定事件 3.在事件中完成相应逻辑
? 1）操作是一个功能，使用需要一个方法来控制
? 2）方法名是变量，所以控制变量就可以控制该方法
事件指令：
? 1) 在实例成员methods中声明事件方法
? 2）标签通过事件指令绑定声明的方法：v-on: 事件名=“事件方法名”
eg: <button v-on:click="btnClick">按钮</button>
? 3) 标签通过事件指令绑定声明的方法，且自定义传参：v-on:事件名=“事件方法名()”
eg: <button v-on:click="btnClick()">按钮</button>
不传任何参数:
eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象，同不写()
案列：
<body>
<div id="app">
<button v-on:click="btnClick">{{ btn1 }}</button>
<button v-on:click="btnClick">{{ btn2 }}</button>
<hr>
<!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) -->
<button v-on:click="fn1">按钮3</button>
<!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 -->
<button v-on:click="fn2($event, 10, 20)">按钮4</button>
<hr>
<button v-on:click="fn(btn1)">{{ btn1 }}</button>
<button v-on:click="fn(btn2)">{{ btn2 }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑
// var btn = document.getElementsByTagName('button')[0];
// btn.onclick = function () {
// console.log(111111111111);
// };
new Vue({
el: '#app',
data: {
btn1: '按钮1',
btn2: '按钮2',
},
methods: {
btnClick () {
console.log(666)
},
fn1 (ev) {
console.log(ev.clientX, ev.clientY);
},
fn2(ev, n1, n2) {
console.log(ev, n1, n2);
console.log(ev.clientX, ev.clientY);
},
fn (msg) {
console.log(msg);
}
}
})
</script>