Vue第一天学习笔记（后端适用）
Vue
1. Vue引言
Vue是一个渐进式的JavaScript框架（易用、高效、灵活）：让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易完成数据和视图的绑定。双向绑定（MVVM）。
注意：日后再使用Vue过程中页面不要再引入Jquery框架。
2. Vue入门
2.1 Vue下载
创建一个.html文件，然后通过如下方式引入Vue：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
或者：
<script src="https://cdn.jsdelivr.net/npm/vue">script>
2.2 Vue入门应用
<div id="app">
{{ msg }} {{ username }} {{ pwd }}
<br>
<span>
{{ username }}
<h1>{{ msg }}h1>
span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue ({
el:"#app", //element 用来给Vue实例定义一个作用范围
data:{ //用来给Vue实例定义一些相关数据
msg:"好好学习，天天向上",
username:"hello vue",
pwd:"12345",
},
});
script>
<div id="app">
<h3>{{ msg }}h3>
<h3>名称：{{ user.name }} 信息：{{ user.msg }}h3>
<h3>年龄：{{ age }}h3>
<h3>{{ lists[0] }}--{{ lists[1] }}--{{ lists[2] }}h3>
<h3>{{ users[0].name }}h3>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue ({
el:"#app",
data: {
msg:"hello vue",
user:{name:"Kaiii",msg:"好好学习"},
age:23,
lists:["学习","看书","编码"],
users:[{name:"小白",age:18},{name:"小黑",age:20}],
}
});
script>
总结：
- Vue实例（对象）中el属性：代表Vue的作用范围，日后在Vue的作用范围都可以使用Vue的语法。
- Vue实例（对象）中data属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue的作用范围内取出。
- 在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用相关的方法，以及逻辑运算符。
<div id="app">
<span>{{ msg.toUpperCase() }}span>
div>
- el属性中可以书写任意的CSS选择器[Jquery选择器]，但是在使用Vue开发时推荐使用id选择器。
3. v-text和v-html
3.1 v-text
v-text：用来获取data中数据，将数据以文本的形式渲染到指定标签内部，类似于JavaScript中的innerText。
<div id="app">
<span>{{ message }}span>
<span v-text="message">span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"努力"
},
});
script>
总结：
{{}}（插值表达式）和v-text获取数据的区别在于：
- 使用v-text取值会将标签中原有的数据覆盖，使用插值表达式不会覆盖标签中原有的数据。
- 使用v-text可以避免在网络环境较差的情况下出现插值闪烁，使用插值表达式在网络较慢的情况下会先显示表达式本身。
3.2 v-html
v-html：用来获取data中数据，将数据中含有的html标签先解析再渲染到指定标签的内部类似于JavaScript中的innerHTML。
<div id="app">
<span>{{ message }}span>
<br>
<span v-text="message">span>
<br>
<span v-html="message">span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"点我"
},
});
script>
运行结果：
4. Vue中的事件绑定（v-on）
4.1 绑定事件语法
<div id="app">
<h2>{{ message }}h2>
<h2 v-text="message">h2>
<h2>年龄：{{ age }}h2>
<br>
<input type="button" value="点我改变年龄" v-on:click="changeage">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello 今天也是学习的一天",
age:23,
},
methods:{ //methods:用来定义Vue中的事件
changeage:function () {
alert('点击触发');
}
}
});
script>
总结：
事件
事件源：发生事件的dom元素。
事件：发生特定的动作 click。
监听器：发生特定动作之后的事件处理程序，通常是js中的函数。
- 在Vue中绑定事件是通过v-on指令完成的，v-on:事件名，如 v-on:click。
- 在v-on:事件名的赋值语句中是当前事件触发调用的函数名。
- 在Vue中事件的函数统一定义在Vue实例的methods属性中.。
- 在Vue定义的事件中this指的就是当前的Vue实例，日后可以在事件中通过使用this获取Vue实例中的相关数据。
methods:{ //method:用来定义Vue中的事件
changeage:function () {
//在函数中获取Vue实例中data的数据
//在事件函数中this就是Vue实例
//console.log(this);
//this.age = this.age + 1;
this.age++;
}
}
4.2 Vue中事件的简化
<div id="app">
<h2>{{ age }}h2>
<input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
<input type="button" value="通过@绑定事件修改年龄每次-1" @click="editage">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
age:23,
},
methods:{
changeage:function () {
this.age++;
},
editage:function () {
this.age--;
}
}
});
script>
总结：
日后在Vue中绑定事件时可以通过@符号形式简化v-on的事件绑定。
4.3 Vue事件函数两种写法
<div id="app">
<span>{{ count }}span>
<input type="button" value="改变count的值" @click="changecount">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
/*changecount:function () {
this.count++;
}*/
changecount(){
this.count++;
}
}
});
script>
总结：
在Vue中事件定义存在两种写法：
- 函数名:function(){}
- 函数名(){}，更推荐这种写法。
4.4 Vue事件参数传递
<div id="app">
<span>{{ count }}span>
<input type="button" value="改变count为指定的值" @click="changecount(23,'Kaiii')">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
changecount(count,name){
this.count = count;
alert(name);
}
}
});
script>
总结：
在使用事件时，可以直接在事件调用处给事件进行参数传递，在事件定义处通过定义对应变量接受传递的参数。
4.5 小案例
<div id="app">
<input type="button" value="-" @click="editcount">
<h2>{{ count }}h2>
<input type="button" value="+" @click="addcount">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
editcount(){
if(this.count > 1){
this.count--;
}else{
alert("不能再少了");
}
},
addcount(){
if(this.count < 10){
this.count++;
}else{
alert("每个人不能超过10件");
}
}
}
});
script>
5. v-show,v-if和v-bind
5.1 v-show
v-show：用来控制页面中的标签元素是否展示，底层控制标签display属性。
<div id="app">
<h2 v-show="false">好好学习，天天向上h2>
<h2 v-show="show">好好学习，天天向上h2>
<input type="button" value="点我显示隐藏" @click="showHide">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el:"#app",
data:{
show:true,
},
methods:{
showHide(){
this.show = !this.show;
}
}
});
script>
总结：
- 在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏。
- 在v-show中可以通过boolean表达式控制标签的展示和隐藏。
5.2 v-if
v-if：用来控制页面中的标签元素是否展示，底层是通过对dom树节点进行添加和删除来控制展示和隐藏。
5.3 v-bind
v-bind：用来给页面中标签元素绑定相应的属性。
简化写法：v-bind:属性名====> :属性名。