Vue学习记录 (模板,差值表达式,v-text,v-html,v-bind,v-model,v-if,v-show,v-for,v-on,this关键字,按键修饰符)

• 模板示范

<div id="d1">

</div>
<script>
    new Vue({
        el:"#d1",  //	作用的区域
        data:{		//	参数
            
        },
        methods:{	//  函数
        
    	},
        computed:{	//	计算数据函数
            
        },
        create:{	//  页面开始加载时运行
            
        }
    })
</script>

• 插值表达式:{{}}

  • 在Vue的作用范围中使用data
  • 支持js代码的运算
  • 支持函数的调用

• v-text:直接进行输出,会覆盖原有内容

• v-html:会把数据解析成html代码执行

• v-bind:对属性进行绑定

  • 简写 :属性=’’ ’ 值 ’ ‘’
  • 变量必须使用 ’ ’ 包裹,否则会被当做变量去Vue中寻找
  • 变量名中含有 - 时,需要使用 ’ ’ 进行包裹
  • 使用对象时可以不用加 ’ ’

• v-model:表单数据的双向绑定,也是Vue

• v-if:控制标签元素

  • 每次都会删除或创建元素
  • 有较高的切换性能消耗

• v-show:控制标签元素

  • 没有进行删除,添加了display=none
  • 有较高的初始渲染消耗

• v-for:循环

  //  遍历数组
  v-for = "(item,i) in 数组"
  //	遍历对象
  v-for = "(val,key,i) in 对象"
  //	迭代数字
  v-for = "(count,i) in 数字"
  

• v-on:绑定事件

  • 事件修饰符
    • stop:阻止冒泡(从内到外执行函数)
    • prevent:阻止默认行为
    • capture:使用捕获机制执行函数(从外到内)
    • self:只有自己才能触发
    • once:只触发一次事件修饰符

• 按键修饰符:修饰v-on绑定的事件

  • .enter //回车键
  • .tab //Tab键
  • .delete (捕获 “删除” 和 “退格” 键) //Backspace键或Delete键
  • .esc //Esc键
  • .space //空格键
  • .ctrl //Ctrl键
  • .alt //Alt键
  • .shift //Shift键