vue导入方式及优缺点
1.Vue加载方式一：下载到本地
<script src="js/vue.js"></script>
2.Vue加载方式一:使用cdn导入(链接)
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
前台框架：angular、react、vue
vue：有前两大框架优点，摈弃缺点；没有前两个框架健全
vue优点：
中文API
单页面应用：提升移动端app运行速度
组件化开发
数据双向绑定：变量全局通用
虚拟DOM：缓存机制
数据驱动思想(相比DOM驱动)：只考虑数据，不需要在意DOM结构
Vue下载及官方文档：由此进入
挂载点
new Vue（{
el:"#app", // css3选择器，一个页面可以有多个实例，对应多个挂载点
}）
- html与body不能作为挂载点
2)一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识
插值表达式
{{ 变量以及变量的简单运算 }}
1) 用实例成员data为vue环境提供数据，数据采用字典{}形式
2) 在插值表达式{{}}中，直接书写数据的key来访问数据
3) 在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Vue加载方式一：下载到本地-->
<script src="js/vue.js"></script>
<!--Vue加载方式一:使用cdn导入(链接)-->
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ info }}</p>
<p>{{ num }}</p>
<p>{{ arr }}</p>
<p>{{ dic }}</p>
<p> {{ dic['name'] }}</p>
</div>
</body>
<script>
// 插值表达式
let app = new Vue({
el:'#app',
data:{
info :'message',
num:100,
result:true,
arr:[1,3,4,5,6,],
dic:{
name:'zhang',
age:22
}
}
})
</script>
<script>
console.log(app); // 同app.$data结果一样
console.log(app.$data); //{arr: Array(5),dic: Object,info: "message",num: 100,result: true}
console.log(app.$data.info); // message
console.log(app.info); // message
</script>
</html>
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p> {{ num+100 }}</p>
<p> {{ num+msg }}</p> <!--支持字符串和数字的拼接-->
<p> {{ msg.split('')[4] }}</p> <!--切分取索引为4的值-->
<p>{{ msg | f1 }}</p>
<p>{{ num | f2 }}</p> <!--|前的相当于传的位置实参-->
<p>{{ 10,20,30,40 | f3 }}</p>
<!--<p>{{ 10,20 | f3(30,40) }}</p>-->
<p>{{ 10 | f3}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:100,
msg:'hello',
},
filters:{
f1:function() {
return '过滤后的结果'
},
f2:function(num) {
return num*3
},
f3:function(a,b,c,d) {
return a+b+c+d
}
}
})
</script>
</html>
文本指令
1）v-指令名="变量"，变量是需要data提供数据值的；
2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号；
3）v-html可以解析html语法；
4) 反引号：可以在一对反引号内些多行文本，可以是普通文本，也可以是事先定义好的变量；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
<p v-text="123"></p>
<p v-text="true"></p>
<p v-text="'abc'"></p> <!-- 字符串常量-->
<p v-text="'abc' + msg"></p>
<p v-text="[1,2,3]"></p>
<p v-text="[a,b,c]"></p>
<p v-html="`<b style='color:red'>好的</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:100,
msg:'hello',
a:1,
b:2,
c:3
}
});
</script>
<script>
let s1 = `第一行
第二行
结束`;
console.log(s1);
let name='zhang';
let age=22;
let s2=`
name:${name}
age:${age}
`;
console.log(s2);
</script>
</html>
js面向对象
js语法中{}就是一个对象，可以意通过点取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
function f1() {
console.log('f1 fun')
}
f1();
// 构造函数==> 类
function F2(name) { // 构造函数的函数名通常遵循驼峰体命名法，首字母大写
this.name = name; // 在对象的名称空间设置属性
console.log(this); // this类似于python后端的对象中的self
this.read = function (course) {
console.log(this.name + '在学习' + course)
}
}
let f2 = new F2('Bob');
console.log(f2.name);
let f3 = new F2('Tom');
console.log(f3.name);
f2.read('English');
f3.read('Chinese');
/*
F2 {name: "Bob"}
Bob
F2 {name: "Tom"}
Tom
Bob在学习English
Tom在学习Chinese
*/
let obj = {
name:'zhang',
// 这是类内部定义的方法
// 书写方式1
// read:function (course) {
// console.log(this.name + '正在学习' + course); // zhang正在学习Basketball
// };
// 书写方式2
read(course) {
console.log(this.name + '正在学习' + course); // zhang正在学习Basketball
}
};
console.log(obj.name); // zhang
obj.read('Basketball'); // zhang正在学习Basketball
console.log(obj.read('Basketball')) // undefined
</script>
</html>
js原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<i>东方国际化</i> <!--斜体-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {count:0},
});
</script>
<script>
// ES5中没有类只有对象，为了满足需要，在ES6中引入了类
function A() {}
let a1 = new A();
let a2 = new A();
console.log(a1.num); // undefined
console.log(a2.num); // undefined
// 为A类添加原型，类似于类属性；
A.prototype.num = 100;
console.log(a1.num); //100
console.log(a2.num); // 100
console.log(A.prototype.num); // 100
// ES6语法中的类
class B {
constructor (name) {
this.name = name
}
}
let b1 =new B('zhang');
let b2 = new B('wang');
console.log(b1.name); // zhang
console.log(b2.name); // wang
</script>
</html>
js 函数
ES6中定义变量的4中方式
var a = 10;
let b = 20;
const c = 30;
d = 40; # 不加声明词定义的是全局变量，即使在函数内部定义的在函数外部也能正常访问。如果在函数外部也有变量d,则修改全局的变量
let、const定义的变量不能重复定义，且具备块级作用域
全局作用域 > 块级作用） > 局部作用域
块级作用域：只要在{}内用let定义的变量就是块级作用域
局部作用域：在函数内部定义的let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数补充</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
d=100;
function f() {
var a = 10;
let b = 20;
const c = 30;
d = 40; // 全局变量, 局部变量d能修改全局的d
}
f();
console.log(d); // 40
const e = 50;
// var e = 60; // 一旦一个变量被声明成常量，就不能再被重复的声明成变量
// console.log(e)
var ff = 11;
let g = 22;
var ff = 33;
// let g = 44; // let 也不能被重复声明
console.log(g); // 22
console.log(ff); // 33
if (1) {
var aa =44;
let bb = 55;
}
console.log(aa); // 44
// console.log(bb); // Uncaught ReferenceError: bb is not defined
for (var i = 0; i < 5; i++) {
console.log(i); // 0,1,2,3,4
}
console.log(i); // 5 js的内存泄漏，如果这里不像访问到内部的i，变量就用let声明
</script>
</html>
几种函数的书写方式
<script>
function f1() {
console.log('f1 run');
}
f1();
let f2 = function () {
console.log('f2 run');
}; // 定义成变量的形式，要加分号
f2();
let f3 = () => {
console.log('f3 run');
};
f3();
// 如果箭头函数没有函数体，只有返回值
let f4 = (a,b) => a + b;
let res =f4(1,2);
console.log(res); // 3
// 如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num *10;
res = f5(10);
console.log(res); // 100
</script>
function、箭头函数、方法的区别
function和方法内部有this，箭头函数没有。
<script>
let obj = {
name :'zhang',
// (1) function
read:function (course) {
console.log(this); // {name: "zhang", read: ƒ}
console.log(this.name + '在学习' + course);
}, // zhang在学习English
// (2) 箭头函数
read:course => {
console.log(this);
// this指向 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
console.log(this.name + '在学习' + course); // 在学习English 也就是箭头函数中没有this一说
},
// (3) 方法
read(course) {
console.log(this); // {name: "zhang", read: ƒ}
console.log(this.name + '在学习' + course); // zhang在学习English
},
};
obj.read('English')
</script>
this指向Vue的两种方式
<script>
new Vue({
data: {
res: ''
},
methods: {
// 方式1:
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(function (response) { // 如果要使用function，又想this指向Vue，可以定义一个临时变量存储this(Vue)
_this.res = response.data;
})
},
// 方式2:
fn1 () {
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(response => {
this.res = response.data;
})
}
}
})
</script>
// 这种方式function找到的是axios
<script>
new Vue({
fn1 () {
// axios插件A
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(function(response){
this.res = response.data; // 这里的this指向axios
})
}
}
})
</script>
事件指令
事件指令： v-on:事件名="方法变量"
简写： @事件名="方法变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
</head>
<body>
<div id="app">
<p v-on:click = "f1">{{ msg }}</p>
<p @click = "f1">{{ msg }}</p>
<hr>
<p @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!-- 事件变量，不添加()，默认会传事件对象: $event -->
<p @click="f8" >{{ info }}</p>
<!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
<p @click="f8(10,20,30)" >{{ info }}</p>
<p @click="f8($event,'啦啦啦')" >{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'点击切换',
action:'鼠标事件',
info:'确定点击者'
},
methods:{
f1 () {
this.msg = '点击了！'
},
f2 () {
this.action = '悬浮';
console.log('悬浮')
},
f3 () {
this.action = '离开';
},
f4 () {
this.action = '按下';
},
f5 () {
this.action = '抬起';
},
f6 () {
this.action = '移动';
console.log('移动')
},
f7 () {
this.action = '右键';
},
f8 (a,b,c,d) { // 形参
console.log(a,b,c,d); // 不传参的情况下，系统默认传一个参数MouseEvent undefined undefined undefined
this.info = '点击了！！！'; // 传参的情况下就是我们自己的
},
},
})
</script>
</html>
属性指令
属性指令： v-bind:属性名="变量"
简写： :属性名="变量"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>
<!--1、简单使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
<!--<img :src="img_src" alt="">-->
<!--2、class属性绑定-->
<!--c1变量的值就是类名-->
<p :class="c1"></p>
<!--多类名可以用[]语法，采用多个变量来控制-->
<p :class="[c2, c3]"></p>
<!--选择器位可以设置为变量，也可以设置为常量，常量加引号-->
<p :class="['d1', c4]"></p>
<!--{类名: 布尔值}控制某类名是否起作用，true就在标签内添加这个类属性，否则不添加-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用-->
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
<!--3、style属性绑定(了解)-->
<p :style="myStyle">样式属性</p>
<p :style="{ w,height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '简单使用',
def: '自定义属性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
'100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
</html>