vue非组件的初学笔记

互联网
2025-09-04 19:48:04

1.创建Vue实例，初始化渲染的核心准备容器引包创建Vue实例new Vue() el用来指定控制的盒子data提供数据 2.插值表达式

作用利用表达式插值，将数据渲染到页面中格式{{表达式}} 注意点

表达式的数据要在data中存在表达式是可计算结果的语句插值表达式不能写在标签里面 3.Vue的相关指令

3.1 v-前缀的标签属性

v-html="表达式"设置当前标签元素的innerhtmlv-show="表达式"表达式的值为true时显示，false隐藏原理是display:none适用于频繁切换隐藏场景v-if="表达式"表达式的值为true时显示为false时隐藏原理是创建或者移除元素节点适用于不频繁切换的场景v-else=" “和v-else-if=” "辅助v-if进行判断渲染，需要紧挨着v-if一起使用v-on可以简化为 @ v-on:事件名=“内联语句”v-on:事件名="method中的函数名"methods里面的函数形式 fn(){} 如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数 v-bind可以简化为： :属性名=“表达式”**操作class属性 ** ：class=“{a:true或者fasle或者判断trueorfalse的语句}” 适用于一个类名来回切换比如tab导航栏class=“[类名1,类名2,类名2]”适用于批量删除或者添加类 <div id="app"> <ul> <li v-for="(item,index) in list" :key="item.id" @click="activeindex=index"> <a :class={active:index==activeindex} herf="#">{{item.name}}</a> </li> </ul> </div> v-for=“(item,index) in 数组"适用于数据循环，多次渲染整个元素，主要针对数组，对象，数字如果不用index可以 ”item in 数组” <ul> <li v-for="(item,index) in list">{{item}}-{{index}} </li> </ul>

案例- 列表渲染和删除功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in alist" :key="item.id"> <span>{{ item.name }}</span> <span>{{ item.author }}</span> <button v-on:click="del(item.id)">删除</button> </li> </ul> </div> <script> const app=new Vue({ el:'#app', data:{ alist:[ {id:1,name:'《红》',author:'曹'}, {id:2,name:'《绿》',author:'吴'}, {id:3,name:'《蓝》',author:'施'}, ] }, methods:{ del(id){ this.alist=this.alist.filter(item =>item.id !== id) } } } ) Vue.config.productionTip=false </script> </body> </html>

v-for里面key的作用：作为唯一标识注意key的值只能是字符串或者数字类型，推荐使用id，因为需要具有唯一性

v-model重要，双向数据绑定既可以获取表单内容也可以设置表单元素的内容 v-model=“表达式” 表达式和data里面的变量**双向联动 ** 如果有login和reset直接调用this.变量=''这样就可以reset了如果是表单输入框的话获取的就是输入的内容一般为字符，但是可以配合.trim和.number使用单选框获取的是true or false多选按钮获取的是选择项的value值一般会有value和name属性name用来同组相斥复选框写在selection里获取的是option的value值option一般有value值文本域获取的是文本值

案例- 列表的添加删除统计清空 <section id="app">  <header class="header"> <h1>小黑记事本</h1> <input placeholder="请输入任务" class="new-todo" v-model="todoname"/> <button class="add" @click="add">添加任务</button> </header>  <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item, index) in list" :key="item.id"> <div class="view"> <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label> <button @click="del(item.id)" class="destroy"></button> </div> </li> </ul> </section>  <footer class="footer" v-show="list.length>0">  <span class="todo-count">合计:<strong> {{list.length}}</strong></span>  <button class="clear-completed" @click="clear"> 清空任务 </button> </footer> </section>  <script src=" cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { todoname:'', list: [ { id: 1, name: '跑步一公里' }, { id: 3, name: '游泳100米' } ] }, methods: { del (id) { // console.log(id) => filter 保留所有不等于该 id 的项 this.list = this.list.filter(item => item.id !== id) }, add(){ if(this.todoname.trim()==''){ alert("请输入值") return } this.list.unshift({ id:+new Date(), name:this.todoname, }) }, clear(){ this.list=[] } } }) </script> 总结

一次添加多个内容-属性添加法

{ 属性名：属性值，属性名：属性值  }

数组的方法积累

.filter(item=>item.id!=id)  .unshift() .reduce((sum,index)=>>sum+item.score,0)

字符串的方法积累

.trim()

时间戳的应用

+new Date()

我的错误和思维漏洞

在data里面相互引用的时候不加this清空操作字符串就赋值’'数组就就赋值[ ]如果想实时动态改变值：就用@事件=“数值改变的表达式或者函数调用”表达式可计算的特性很重要，插值表达式不放在标签里面，其他就不用考虑了params：里面的默认写法是属性名：属性值（后端规定）但是如果穿的是多个属性组成的对象，直接params：对象就可以

3.2 指令修饰符

@keyup.enter=""键盘事件监听绑定回车键v-model.trim=""双向互动绑定去除首尾空格v-model.number=""双向互动绑定字转数字@事件名.stop=""阻止冒泡@事件名.prevent=“”*阻止默认行为 *例如a标签的跳转

4.Vue里面的各种属性 methods里面的函数形式 fn(){} 用途：发请求，事件触发在v-on=“”如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数如果在vue的其他地方和插值表达式里面要用的话还是要加括号 computed里面的属性形式 f’n(){} 和用data里面的其他值一样用这个f’n也就是当为属性在用,所以不管是vue的其他地方还是插值表达式都是f’n缓存特性以提升性能计算属性得出来的值是默认不能修改的，在任何地方修改都会报错，只有加上set方法之后才可以修改 computed:{ 计算属性名字：{ get(){ return }, set(修改的值value）{ } //当在外部有修改计算属性的行为的时候，就会触发这个set方法，并把修改的值赋值给value,然后可以对value进行相关的操作。 }

但是注意要用computed里面的某个属性里的修改的话就应该是属性=‘修改值’(vue里面其他地方用还是要加this哦)

watch监视器如果你写了某个数据的监视器，只要数据变化了，就会触发这个对应监视器作用：可以根据数据的实时变化，来发送请求 little tips：用clearTimeout(a) const a=setTimeout()来实现防抖延迟执行 .

非整个对象的写法整个对象的监听写法 deep是深度监视就是对对象里面每一个属性都监视，immmediate是一进页面就翻译一次。

5.生命周期 konwlegde

生命周期钩子：在vue的生命周期里自动运行的函数，可以在这些函数里面运行自己的代码。 created：发初始化请求 mounted：dom操作 destroy是在关闭页面后执行的，可以用app.$destroy()将数据变成死数据

example-自动获取焦点

6.工程化开发 index.html提供vue所管理的容器App.vue是根目录components是子组件main.js导入vue,App.vue,用render方法将App.vue动态渲染到 index.html

标签：

vue非组件的初学笔记由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“vue非组件的初学笔记”

上一篇
DeepSeek-V3技术报告

下一篇
《深度学习》——调整学习率和保存使用最优模型