企业网站制作报价,网站名称和域名有关系,专业做网站,wordpress网页宽度(1).vue起步
1:引包2:启动 new Vue({el:目的地,template:模板内容});options 目的地 el内容 template数据 data 保存数据属性 数据驱动视图
(2).插值表达式
{{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{ true }}三元表达式…(1).vue起步
1:引包2:启动 new Vue({el:目的地,template:模板内容});options 目的地 el内容 template数据 data 保存数据属性 数据驱动视图
(2).插值表达式
{{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{ true }}三元表达式 {{ true?‘是正确’:‘错误’ }} 可以用于页面中简单粗暴的调试注意: 必须在data这个函数中返回的对象中声明
(3).什么是指令
在vue中提供了一些对于页面 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示 比如html页面中的属性 div v-xxx /div 比如在angular中 以ng-xxx开头的就叫做指令在vue中 以v-xxx开头的就叫做指令指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值框架会进行相关DOM操作的绑定
(4).vue中常用的v-指令演示
v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少v-html: 元素的innerHTMLv-if : 判断是否插入这个元素,相当于对元素的销毁和创建v-else-ifv-elsev-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换 v-text 只能用在双标签中v-text 其实就是给元素的innerText赋值v-html 其实就是给元素的innerHTML赋值v-if 如果值为false,会留下一个!----作为标记万一未来v-if的值是true了就在这里插入元素如果有if和else就不需要单独留坑了如果全用上 v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用v-if和v-else-if都有等于对应的值而v-else直接写v-if家族都是对元素进行插入和移除的操作v-show是显示与否的问题注意: 指令其实就是利用属性作为标识符,简化DOM操作,看v-modelxxxv-model 代表要做什么 xxx代表针对的js内存对象写在那个元素上就对哪个元素操作
(5).v-if和v-show的区别 (官网解释)
v-if 是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。
相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。
一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。
(6).v-bind使用 给元素的属性赋值 可以给已经存在的属性赋值 input value也可以给自定义属性赋值 mydata 语法 在元素上 v-bind:属性名常量||变量名 简写形式 :属性名变量名 div v-bind:原属性名变量/div
div :属性名变量/div(7).v-on的使用
处理自定义原生事件的,给按钮添加click并让使用变量的样式改变普通使用 v-on:事件名表达式||函数名简写方式 事件名表达式
(8).v-model
双向数据流绑定 页面改变影响内存(js)内存(js)改变影响页面
(9).v-bind 和 v-model 的区别?
input v-modelname 双向数据绑定 页面对于input的value改变能影响内存中name变量内存js改变name的值会影响页面重新渲染最新值 input :valuename 单向数据绑定 内存改变影响页面改变 v-model: 其的改变影响其他 v-bind: 其的改变不影响其他v-bind就是对属性的简单赋值,当内存中值改变还是会触发重新渲染
(10).v-for的使用
基本语法 v-foritem in arr对象的操作 v-foritem in obj如果是数组没有id v-for(item,index) in arr :classindex 各中v-for的属性顺序(了解) 数组 item,index对象 value,key,index
(11).过滤器filter
filters 将数据进行添油加醋的操作过滤器分为两种 1:组件内的过滤器(组件内有效)2:全局过滤器(所有组件共享)
局部过滤器的使用
先注册,后使用组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据使用方式是 {{ 原有数据 | 过滤器名 }}过滤器fn: 声明function(data,argv1,argv2...){}使用{{ 数据 | 过滤器名(参数1,参数2) }}
全局过滤器的使用
语法Vue.component(过滤器的名字,fn)调用跟局部组件调用方式一样
(12).侦听器watch watch 监视单个属性和对象 watch:{//监视复杂类型,无法监视的原因是因为监视的是对象的地址 // obj:function(newV,oldV) {// console.log(newV,oldV);// },// key是属于data属性的属性名value是监视后的行为 fn中的参数新值旧值msg:function (newV,oldV) {console.log(newV,oldV);if (newValex) {console.log(sb);}},// 深度监视 object ||arraystus:{deep:true,//深度监视handler:function (newV,oldV) {console.log(newV[0].name)}}小结 基本数据类型 简单监视复杂数据类型深度监视
(13).计算属性computed computed 同时监视多个属性 默认computed只有getter方法
(14).获取DOM元素
救命稻草, document.querySelector1: 在template中标识元素 ref“xxxx”2: 在要获取的时候, this.$refs.xxxx 获取元素 创建组件,装载DOM,用户点击按钮 ref在DOM上获取的是原生DOM对象ref在组件上获取的是组件对象 $el 是拿其DOM这个对象就相当于我们平时玩的this,也可以直接调用函数\
-特殊情况
// 需求input输入框 获取焦点
var App {data: function() {return {isShow : false}},template: div classappinput typetext v-show isShow ref input//div,mounted: function() {this.isShow true;console.log(this.$refs.input);// $nextTick 是在DOM更新循环结束之后执行延迟回调在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOMthis.$nextTick(function() {// 更新之后的DOMthis.$refs.input.focus();})}}new Vue({el: #app,data: function() {return {}},template: App /,components: {App}});
