用easyui做的网站,网站备案幕布照片,青岛博海建设网站,wordpress付费主题下载1.创建Vue实例#xff0c;初始化渲染的核心
准备容器引包创建Vue实例new Vue() el用来指定控制的盒子data提供数据
2.插值表达式
作用利用表达式插值#xff0c;将数据渲染到页面中 格式{{表达式}} 注意点
表达式的数据要在data中存在表达式是可计算结果的语句插值表达式…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 idappulli v-for(item,index) in list :keyitem.id clickactiveindexindexa :class{active:indexactiveindex} herf#{{item.name}}/a/li/ul/divv-for“(item,index) in 数组适用于数据循环多次渲染整个元素主要针对数组对象数字 如果不用index可以 ”item in 数组”
ul
li v-for(item,index) in list{{item}}-{{index}}
/li
/ul 案例- 列表渲染和删除功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappulli v-for(item,index) in alist :keyitem.idspan{{ item.name }}/spanspan{{ item.author }}/spanbutton v-on:clickdel(item.id)删除/button/li/ul/divscriptconst appnew Vue({el:#app,data:{alist:[{id:1,name:《红》,author:曹},{id:2,name:《绿》,author:吴},{id:3,name:《蓝》,author:施},]},methods:{del(id){this.alistthis.alist.filter(item item.id ! id)}}})!--methods写错了而且后面多加了逗号一直报错--Vue.config.productionTipfalse/script
/body
/htmlv-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 idapp!-- 输入框 --header classheaderh1小黑记事本/h1input placeholder请输入任务 classnew-todo v-modeltodoname/button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item, index) in list :keyitem.iddiv classviewspan classindex{{ index 1 }}./span label{{ item.name }}/labelbutton clickdel(item.id) classdestroy/button/div/li/ul/section!-- 统计和清空 --footer classfooter v-showlist.length0!-- 统计 --span classtodo-count合 计:strong {{list.length}}/strong/span!-- 清空 --button classclear-completed clickclear清空任务/button/footer /section!-- 底部 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst 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总结
一次添加多个内容-属性添加法
{
属性名属性值
属性名属性值!--最后一个可以不加逗号--
!--new Vue({})这里也是这么个意思--
}数组的方法积累
.filter(itemitem.id!id) !--这样完了之后一定要赋值原数组回去--
.unshift()!--如果里面有多个属性就是{}这个--
.reduce((sum,index)sumitem.score,0)!--数组里某一项求值--字符串的方法积累
.trim()
!--应用1.可以用来去除前后的空格后判断是不是空字符串--时间戳的应用
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 asetTimeout()来实现防抖延迟执行 .
非整个对象的写法 整个对象的监听写法 deep是深度监视就是对对象里面每一个属性都监视immmediate是一进页面就翻译一次。
5.生命周期
konwlegde 生命周期钩子在vue的生命周期里自动运行的函数可以在这些函数里面运行自己的代码。 created发初始化请求 mounteddom操作 destroy是在关闭页面后执行的可以用app.$destroy()将数据变成死数据
example-自动获取焦点 6.工程化开发
index.html提供vue所管理的容器App.vue是根目录components是子组件main.js导入vue,App.vue,用render方法将App.vue动态渲染到 index.html
