Vue初识
前端框架分类
- Angular
- React
- Vue
前端JS 函数补充
- function定义的函数可以作为类，内部有this
- 箭头函数内部没有this
- {}里面出现的函数称之为方法
js 函数：
function f1() {
console.log('f1 run');
}
f1();
箭头函数：
let f3 = () => { // 没有参数
console.log('f3 run');
};
f3();
// 如果箭头函数有多个参数，有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
// 如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
定义变量区别：
d = 45; //全局变量
const c = 30 ; // 常量
var a = 10 ;
let b = 20 ;
let、const定义的变量不能重复定义，且具备块级作用域
块级作用域： 在一个大括号内(作用范围)
eg:
if (1) {
var a = 10;
let b = 20;
}
定义类：
// 构造函数 == 类
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name);
总结：
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}
在vue 环境内的this : 指父类对象（不是本身对象）
Vue框架的优势
- 中文API 文档
- 单页面应用
- 组件化开发
- 数据双向绑定
- 虚拟DOM
- 数据驱动
- 前后端分离式的web项目
Vue如何在页面引入和使用
- 通过在
script标签内引入vue.js环境 - new关键字创建vue实例
- 通过el参数进行挂载
基本格式
<body>
<div id="app">
{{ 需要渲染的变量 }}
</div>
<script src="js/vue.js"></script>
<script>
//实例化出来vue
new Vue({
el: '#app',
data: {}
})
</script>
</body>
el : 指定dom标签容器的选择器
Vue就会管理对应的标签及其子标 （body,html除外）
data: 对象或函数类型
指定初始化状态属性数据的对象
页面中可以直接访问使用
数据代理: 由vm对象来代理对data中所有属性的操作(读/写)
methods: 包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data中的属性直接使用 this.xxx
Vue插值表达式
在标签内使用{{ 变量的简单运算(+-*/) }}
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ num }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
<script src="js/vue.js"></script>
<script>
//实例化出来vue
new Vue({
el: '#app',
data: {
msg: 'msg',
num: '123'
}
})
</script>
</body>
Vue文本指令
- v-text：渲染文本信息
- v-html：可解析标签内容
- v-once：渲染一次即停止后续渲染
- {{ }}：将内部变量元素当做纯文本输出
<body>
<div id="app">
<!--文本指令
1. v-text: 控制标签的文本值，解析出变量的文本值替换至标签内部文本
2. v-html: 解析带标签的文本
3. v-once: 控制前端只解析一次
-->
<p v-text="msg"></p>
<p v-text="msg.split('')">12345</p>
<p v-html="info"></p>
<p v-on:click="pClick" v-once>{{ msg+info }}</p>
</div>
<script src="js/vue.js"></script>
<script>
//实例化出来vue
new Vue({
el: '#app',
data: {
msg:'sdsdsd',
info:'<i>info</i>'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
</script>
</body>
Vue方法指令
-
v-on:事件="变量"
可以简写为 @事件="变量()“
<p v-on:click="change"></p> <p @click="change"></p>
<body>
<div id="app">
<!--事件指令
v-on:事件名="方法变量"
简写：@事件名="方法变量"
-->
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousmove="f6">{{ action }}</p>
<p @click="f8($event,'第一个')">{{ info }}</p>
<p @click="f8($event,'第二个')">{{ info }}</p>
</div>
<script src="js/vue.js"></script>
<script>
//实例化出来vue
new Vue({
el: '#app',
data: {
msg:'点击切换',
action:'鼠标事件',
info:'确定点击者'
},
methods: {
// pClick: function () {
// this.msg = 'msg111'
// }
f1 () {
this.msg = 'msg111'
},
f2 () {
this.action = '悬浮'
},
f3 (){
this.action = '离开'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移动';
console.log('移动')
},
f8 (ev,argv) {
console.log(ev,argv);
this.info = argv + '点击了';
},
}
})
</script>
</body>
Vue属性指令
v-bind:属性="变量"
可以简写为
<p v-bind:title="t1"></p>
<p :title="t1"></p>
<p :class="c1"></p>
<p :class="[c1,c2]"></p>
<p :class="{'c1':true}"></p>
<p :style="s1"></p> # s1 是字典变量
<p :style="{color:c1}"></p>
<style>
.d1 {
width: 100px;
height: 100px;
background-color: red;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 30%;
}
</style>
<body>
<div id="app">
<p style="color: white" class="d1" title="悬浮提示">红色字体</p>
<!--属性指令
v-bind:属性名="变量"
简写：:属性名="变量"
-->
<img :src="img_src" alt="xxx">
<p v-bind:title="pTitle" @click="changeImg">简单使用</p>
<p :class="d1"></p>
<p :class="'d1'"></p>
<p :class="[d1,d2]"></p>
<p :class="['d1',{d3:true}]"></p>
<p :style="myStyle">样式属性</p>
<p :style="{width:w,height:h,backgroundColor:bg}">样式属性</p>
</div>
<script src="js/vue.js"></script>
<script>
//实例化出来vue
new Vue({
el: '#app',
data: {
pTitle:'简单实用',
img_src:'xxx',
d1:'d1',
d2:'d2',
d3:'d3',
myStyle:{
width: '100px',
height: '100px',
backgroundColor: 'red',
},
w:'200px',
h:'100px',
bg:'green',
},
methods: {
changeImg () {
this.img_src = 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2458227883,4095122505&fm=26&gp=0.jpg'
}
}
})
</script>
</body>
小结
- Vue通过v-指令来控制标签的属性
- Vue通过变量 数据驱动页面（操作页面内容）
