想成为一名程序员？这些Vue知识你必须知道！
时间：2023-04-04 23:14:09
HTML5
初次接触Vue，你必须知道这些！1Vue概述1.什么是Vue？Vue是一个用于构建用户界面的渐进式javascript框架，Vue与React和Angular并称为三大前端框架。2.Vue的安装需要我们先在Vue官网下载Vue的js文件并导入。3.实例化模板
createappconstapp=Vue.createApp({data(){return{}}})mountapp.mount("#app")2内置指令是Vue中以v-开头的特殊属性。它是连接html模板和javascript数据模型时的内置指令。需要用Mustache插值{{msg}}只能写一行表达式，不能写复杂的js，比如ifv-html输出真正的HTML2。属性渲染v-bind：attributename="value"动态绑定一个或多个Attribute，或者一个componentprop到一个表达式可以简写为：attributename="value"3.条件渲染v-if根据插入/移除元素表达式的真值或假值，并在切换给定/组件销毁和重建时绑定元素及其数据；如果元素是
，它的内容将被提取为一个条件块；该指令在条件改变时触发转换；当与v-for一起使用时，v-if的优先级高于v-for的优先级。对应v-if，还有v-else-ifv-elsev-showv-showhiddencss方法，v-if隐藏去除节点；频繁切换使用v-show，否则使用v-if4。列表渲染命令v-for="(item,index)inlist":key="item"item变量的当前数据，index当前下标key是vue遍历的节点的唯一标识，比较好让vue做排序过滤等操作。为了性能优化，要求for指令中key的值是唯一的。遍历对象v-for="(value,key)inobj"rangev-for="itemin5"v-forandv-ifusetemplate{{item}}<3Vue事件1.监听事件我们可以使用v-on指令（通常简写为@符号）来监听DOM事件，并在事件触发时执行一些JavaScript
{{counter}}{{counter}}Vue.createApp({data(){return{counter:1}}}).mount('#app')2.事件处理方式很多事件处理逻辑会比较复杂，所以在v-on指令中直接写JavaScript代码是不可行的。所以v-on也可以接收一个方法名来调用。问候语Vue.createApp({data(){return{name:'vue'}},methods:{greet(event){alert('Hello'+this.name)}}}).mount('#app')3.内联处理器中的方法除了直接绑定方法外，还可以调用内联JavaScript语句中的方法：GreetingsGreetingsVue.createApp({methods:{say(msg){alert(msg)}}}).mount('#app')
