2024年重学VUE——vue 常用指令有哪些？，2024年最新字节面试官级别

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

list:[

{ id:‘1’ , girl:‘花花’},

{ id:‘2’ , girl:‘草草’}

]

}

})

2.3、v-bind 动态绑定属性

作用：用来动态绑定属性，属性值有变动的时候及时对页面数据或样式等保持最新状态。

使用语法：

data () {

return {

url:‘http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg’

}

}

2.4、v-on 绑定事件

作用：给元素绑定事件监听，触发事件后，执行 methods 里面对应函数。可以缩写为@。

使用语法：

或 <div @click=“fun”>

<button @click=“print”>点击,打印vue

methods:{

print(){

console.log(‘vue’)

}

}

注意：上述 v-on 使用的时候没有传参，所以方法后的小括号可以省略。

v-on 传参时，必须添加括号，使用如下。

<button v-for=“item in list” @click=“print(item)”>点击{{item}}

data () {

return {

list:[ ‘one’, ‘two’, ‘three’ ]

}

},

methods:{

print(item){

console.log(‘点击’,item)

}

}

这是一个遍历的按钮组，点击的时候，打印当前元素内容。

2.5、v-if / v-else-if / v-else

作用：根据逻辑判断，控制元素的显示和隐藏。

使用语法：

注意：v-if / v-else-if / v-else 使用语法都是相同的，但是v-else-if 和 v-else 必须与v-if连用，不能单独使用。

真

假

data () {

return {

show:true,

}

}

2.6、v-show / v-hide

作用：控制元素的显示和隐藏。

使用语法：

//表达式为真的时候显示

//表达式为真的时候隐藏

真

假

data () {

return {

show:true,

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。