vue基础学习笔记
VUE学习笔记
-
- Vue框架
- 第一个Vue程序
- el挂载点
- data数据对象
- Vue指令
- 内容绑定v-text，v-html
- 事件绑定v-on
- 显示切换v-show,v-if
- 属性绑定v-bind
- v-for列表循环
- v-model表单元素绑定
Vue框架
javascript框架
简化dom操作
响应式数据驱动
第一个Vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 创建简洁的模板语法把数据渲染到页面上
<body>
<div id="app">
{{ message }}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
script>
body>
el挂载点
作用：el是用来设置Vue实例挂载（管理）的元素
- 范围：Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用多种选择器，但是常用id选择器
- 设置的Dom元素：可以使用其他的双标签，不能使用html和body
data数据对象
- Vue的数据定义在data中
- data可以表现复杂的数据，需要遵守js的语法
字符串{{ message }}
对象<h2>{{school.name}}h2>
<ul>
<li>数组{{campus[0]}}li>
ul>
data:{
message:"Hello Vue!",
school:{
name:"heima"
},
campus:["beijing"]
}
Vue指令
- 内容绑定，事件绑定
- 显示切换，属性绑定
- 列表循环，表单元素绑定
内容绑定v-text，v-html
v-text指令可以设置标签的内容
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
v-html指令设置元素的innerHTML
内容有html结构的会被解析为标签，v-text只会解析为文本
事件绑定v-on
事件有点击，移动，鼠标移入移出等
形式：v-on:事件名=“方法名”
可简写为：@事件名=“方法名”，
具体的方法实现方式写在script中，
this可以获得该实例对象，对数据进行相应的操作
<div id="app">
<input type="button" value="v-on指令" @click="changeFood">
<p v-text="food">p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
<!-- 3.创建Vue实例 -->
var app = new Vue({
el:"#app",
data:{
food:"西红柿鸡蛋"
},
methods:{
doIt:function(){
alert('做IT')
},
changeFood:function(){
this.food+='好吃！'
}
}
})
script>
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的参数
事件的后面跟上.修饰符可以对事件进行限制
<input type="button" value="点击" @click="doIt(666,'老铁')">
<input type="text" value="" @keyup.enter="sayHi">
methods:{
doIt:function(p1,p2){
console.log(p1);
console.log(p2)
},
sayHi:function(){
alert("吃了吗")
}
}
显示切换v-show,v-if
v-show,v-if功能相同，都是根据表达式的真假，切换元素的显示和隐藏
形式：v-show=“true"后边是布尔值，可以为布尔值，变量，表达式。
v-show=“age>10”
v-if是直接操作dom元素的，进行添加和删除。v-show是操作属性display的。
属性绑定v-bind
作用：设置元素的属性（比如src,title,class)
形式：
<div>
<img v-bind:src="imgSrc">
<img v-bind:title="imgetitle+'!!!'">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
<img :src="imgSrc"> 简写形式
div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"黑马程序员",
isActive:false
}
})
v-for列表循环
根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
数组长度的更新会同步到页面上，是响应式的
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}}-{{item}}
li>
ul>
div>
v-model表单元素绑定
获取和设置表单元素的值（双向数据绑定）
data和模板表单里的数据是对应的
绑定的数据<–>表单元素的值
<input type="button" value="设置m" @click="setM">
<input type="text" v-model="message1" @keyup.enter="getM">
{{message1}}
data:{
message1:"hello",
},
methods:{
getM:function(){
console.log(this.message1)
},
setM:function(){
this.message1 = "kkkk"
}
}