自己写东西难免用到前端东西，配合着某宝几块钱的视频也算是系统的过了一遍吧..
把笔记发上来供以后查阅。
对整篇笔记的标记解释
| 标记 | 解释 |
|---|---|
| 🍟 | 了解 |
| 🌙 | 熟悉 |
| ⭐ | 重点 |
| 👑 | 重中之重 |
| 🐚 | 案例 |
| 🍓 | 甜点,解释,额外理解 |
| 🍦 | 作用,方法,属性 |
| 🔔 | 注意 |
| 🚀 | |
| 💎 | 种类 |
| ⚡ | |
| 🏆 | 总标题 |
笔记
1 | 视口: 在移动端观看不缩放<meta name="viewport" content="width=device-width, initial-scale=1"> |
Vue的使用目的就是让js少写点,使固定的逻辑尽量写在标签中,这样就把jquery获取标签的步骤给省掉了
⭐ vue使用
第一步引入
第二步div给坑
第三步vue对象实例化
var vm = new Vue({ // 变量赋值可写可不写
})
🔔 注意
- new Vue() 实例化对象
- 参数
el:关联HTML部分标签,使vue中的内容能够加载到HTML里面
data:页面中需要的数据,可以通过这个属性进行初始化,进而赋值到HTML页面去
methods:可以给当前vue对象添加方法,一般我们都会把方法放在这个对象里面
computed:计算属性,可以给data里面的值添加一些管理
watch:如果需要监控data中的某些属性值,可以在watch中添加监听方法 - 属于设计模式(观察者模式)用的很少
- 小胡子语法:{{}}(插值表达式) - 不可以在属性中使用
- 点击事件:v-on
⭐ 指令
'v-' 开头的都是指令 - 只要是指令,data中的值可以直接使用
v-if 接受一个布尔值,True显示,false隐藏 - 隐藏的实质是标签被销毁
v-else 和v-if挨着 -共享if布尔值
v-else-if 接受另一个布尔值 - 可以无限使用和v-if挨着
v-on 触发事件 - 缩写 >>> :
v-bind 属性绑定data - 缩写 >>> @
v-show 隐藏或展示 - 隐藏的实质是标签display:none
v-hide 隐藏或展示 - 隐藏的实质是标签display:none
⭐ 三元表达式 - 三元表达式在属性里必须写在数组中
{{isTrue ? '123' : '345'}}
{{ok ? 'YES':'NO'}}
⭐ Class绑定(class和v-bind配合使用) - 受data控制
<div :class="{}"></div>
<div :class="[]"></div>
🐚 案例
<script src="./vue.min.js"></script>
<body>
<div id="app">
{{ msg }} // 小胡子语法
{{isTrue ? '123' : '345'}} // 如果True,输出123,否则输出345
{{ok ? 'YES':'NO'}} // 如果True.输出YES,否则输出NO
<div v-if='isOK'>if</div>
<div v-else-if='isOK'>elif</div>
<div v-else>else</div>
<button v-on:click="func"></button> // 函数使用
<button @click="func"></button> // 函数使用 - 缩写
<img src="" v-bind:alt='msg'> // 属性展示data数据
<img src="" :alt='msg'> // 属性展示data数据 - 缩写
{{ msg+1 }} // 可写逻辑不推荐,推荐写入computed
{{ newMsg }} // computed中的逻辑运算
<button @click="msg += 1">按钮</button>
<button @click="func">按钮</button>
<div :class="{box:isTrue,divbox:isHave}">div</div> // class 绑定
<div :class="[firstStyle, secondStyle]">div</div>
<div :class="[isTrue ? 'box' : 'divbox']">div</div>
<div :style="backgroundColor:colorname,color:color1">div</div>
<div :style="[firstName,secondName]">div</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:123, // 变量:"值"
isOK:true,
isTrue:true,
isHave:true,
firstStyle:{
box:true,
divbox:true,
},
secondStyle:{
box:false,
divbox:false,
},
colorname:pink,
color1:red,
firstName:{
colorname:pink,
},
secondName:{
color1:red,
}
},
methods:{
func:function(){ // 函数名:函数体
this.msg += 1
}
},
computed:{
newMsg:function(){
return this.msg+123 // this指代vue对象,不需要写data
}
},
watch:{ //watch中的function不是函数
msg:function(newValue,oldValue){
console.log(newValue)
console.log(oldValue)
观察msg,如果msg发生变化,执行本方法
}
}
})
</script>
</body>
⭐ 列表渲染 - v-for
🍦 遍历数组
v-for=”item in items”
🍦 遍历对象
v-for="(value,key,index) in obj"
🐚 案例
<script>
new Vue({
el:"#ul",
data:{
items:['foo','bar'],
object:{
firstName:'John',
lastName:'Doe',
age:30
}
}
})
</script>
<body>
<div id="ul">
<ul>
<li v-for="(item,index) in items">
{{index}} - {{item.message}}
</li>
</ul>
<ul>
<li v-for="(key,value,index) in object">
{{index}} - {{key}}: {{index}}
</li>
</ul>
</div>
</body>
⭐ 事件修饰符
🍦 作用
stop 阻止事件冒泡
prevent 阻止默认行为
🍦 使用方法
//点击事件后触发doThat方法,然后阻止事件冒泡和默认行为
⭐ v-model - 表单元素,使用data并更新data
🐚 案例
