Vue基础语法（一）vue简介与几个方法
Vue
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: red; }
.pg2 { background-color: yellow; }
.pg3 { background-color: blue; }
</style>
</head>
<body>
<div id="app">
<!-- v-if与v-show的变量值都是bool，控制着显隐 -->
<!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 -->
<!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 -->
<p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
<p v-show="is_show" key="my_show">v-show的显示与隐藏</p>
<p>
<button @click="btn_click('pg1')">红</button>
<button @click="btn_click('pg2')">黄</button>
<button @click="btn_click('pg3')">蓝</button>
<div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
<div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
<div class="box pg3" v-else key="pg3"></div>
</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_if: true,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
# Vue:前台框架
# 渐进式JavaScript框架
# 渐进式：vue可以控制页面的一个局部，vue也可以控制整个页面，vue也能控制整个前端项目
# -- 根据项目需求，来决定vue控制项目的程度
使用方式简介
# 1.下载：https://vuejs.org/js/vue.min.js
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
# 2.导入vue.js
<script src="js/vue.min.js"></script>
# 3.在自定义的script标签中创建vue对象
new Vue({
el:...
data:..
}）
# 4.用vue对象来控制页面内容
在script脚本内实现
vue的优点
'''
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
'''
挂载点与数据的渲染
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
<div class="root">{{ abc }}</div>
<div class="main">{{ xyz }}</div>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
// 挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面控制的结构应该是一对一关系，所以挂载点选择id作为唯一标识
el: '#app',
// 在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供
data: {
abc: '内容',
xyz: 3.14
}
})
</script>
vue实例
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
<div class="root">{{ abc }}</div>
<div class="main">{{ xyz }}</div>
</div>
</body>
<script>
new Vue({
e1:'#app'，
data:{
abc:'内容',
xyz:'111'
}
})
</script>
methods绑定事件
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script><head>
<meta charset="UTF-8">
<title>Title</title>
<head>
</head>
<body>
<div id="app">
<!-- v-on来为事件绑定方法，事件用 :事件名 标注 -->
<!-- 语法：v-on:事件名 = "事件变量" -->
<!-- 事件变量：由vue实例的methods提供 -->
<button v-on:click="btnClick">{{ msg }}</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: "按钮"
},
methods: {
btnClick: function() {
alert ('this is alert')
}
}
})
</script>
案例：通过事件修改标签样式
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 通过不同的类名控制着一套css样式 */
.btn {
width: 100px;
height: 40px;
background: orange;
}
.botton {
width: 200px;
height: 80px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind来为属性绑定变量，属性用 :属性名 标注 eg: :style :class :id -->
<!-- 语法：v-bind:属性名 = "属性变量" -->
<!-- 事件变量：由vue实例的data提供 -->
<button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "按钮",
my_style: {
// background: 'transparent'
},
my_cls: 'btn'
},
methods: {
btnClick: function () {
// console.log(this.my_style.background)
// this.my_style.background = 'yellow';
// 修改类名就能直接对应一套css样式
if (this.my_cls == 'btn') {
this.my_cls = 'botton'
} else {
this.my_cls = 'btn'
}
}
}
});
</script>
</html>
案例：通过事件修改标签样式
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 通过不同的类名控制着一套css样式 */
.btn {
width: 100px;
height: 40px;
background: orange;
}
.button {
width: 200px;
height: 80px;
background-color: yellowgreen;
}
.body1{
background: #FF0004;
}
.body2{
background: #F6FC0A;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind来为属性绑定变量，属性用 :属性名 标注 eg: :style :class :id -->
<!-- 语法：v-bind:属性名 = "属性变量" -->
<!-- 事件变量：由vue实例的data提供 -->
<button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el : '#app',
data:{
msg:'点击按钮',
my_cls:'btn',
// my_style: {
// background: 'transparent'
// }
},
methods:{
btnClick:function(){
if (this.my_cls == 'btn'){
this.my_cls = 'button'
}else{
this.my_cls = 'btn'
}
}
}
});
</script>
</html>
实例的computed
computed功能：将function封装给一个变量，通过该变量就可以得到该function的返回值
应用场景：一个变量(name)依赖于 多个变量(first_name + last_name)的值
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<div id="app">
<!-- v-model就是为表单元素 value属性 绑定变量 -->
<p>
姓：<input type="text" placeholder="姓" v-model="first_name">
</p>
<p>
名：<input type="text" placeholder="名" v-model="last_name">
</p>
<p>
<!-- 插值表达式中可以书写 变量表达式 -->
姓名：<span class="span">{{ name }}</span>
</p>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
first_name:'',
last_name:''
},
computed:{
name:function () {
if(this.first_name == '' && this.last_name == ''){
return '姓名'
}
return this.first_name + this.last_name
}
}
});
</script>
实例的watch方法
watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数
应用场景：多个变量(first_name、last_name)依赖于一个变量(name)
<div id="app">
<p>
姓名：<input type="text" placeholder="姓名" v-model="name">
</p>
<p>姓: {{ first_name }}</p>
<p>名: {{ last_name }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: "",
first_name: "姓",
last_name: "名",
},
watch: {
name: function () {
// eg: name = “张三”
this.first_name = this.name[0]; // 张
this.last_name = this.name[1]; // 三
}
}
});
</script>
实例的delimiters
<body>
<div id="main">
<!-- 查找表达式 {{ }} 符号与其他语言冲突，可以自定义表达式的符号 -->
<!-- 实例的 delimiters: ['左侧符号', '右侧符号'] -->
{{ msg }}{{{ msg }}}${ msg }
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
// vue实例(对象)
new Vue({
el: '#main',
data: {
msg: "信息"
},
// delimiters: ['{{{', '}}}'],
delimiters: ['${', '}'],
});
</script>
实例的生命周期钩子
学习目的：
#钩子：满足某种条件被（系统）调用的方法
在一个vue实例，从创建到销毁，整个过程中或产生一些时间节点，这些时间节点都会回调一些指定名字绑定的方法，在这些函数中去完成特点时间点的业务功能
new Vue({
el: '#app',
data: {
msg: "message"
},
methods: {
fn: function () {
return '123'
}
},
beforeCreate: function () {
console.log('实例要被创建了');
console.log(this.msg)
},
created: function () {
console.log('实例已经创建了');
console.log(this.msg);
console.log(this.$el)
},
mounted: function () {
console.log('实例已经渲染到页面');
console.log(this.msg);
console.log(this.$el);
console.log(this.fn)
},
'生命周期钩子名': function () {
console.log('该时间点需要完成的业务逻辑');
},
});
