VUE基础学习笔记——01模板语法
VUE基本使用
1.传统开发模式对比
原生JS
<div id="msg"><div>
<script type="text/javascript">
var msg='hello world';
var div=document.getElementById('msg');
div.innerHTML=msg;
script>
jQuery
<div id="msg">div>
<script type="text/javascrtpt" src="js/jquery.js">script>
<script>
var msg='hello world';
$('#msg').html(msg);
script>
2.vue 的基本使用步骤
1、需要提供标签用于填充数据
2、引入 vue.js 库文件
3、使用 vue 的语法做功能
4、把 vue 提供的数据填充到标签里面
<body>
<div id="app">
<div>{
{msg}}div>
/*
插值表达式用法：
将数据填充到HTML标签中；
支持基本的计算操作。
*/
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app', //el:元素的挂载位置（值可以是CSS选择器或者DOM元素）
data:{
//data：模型数据（值是一个对象）
msg:'hello vue'
})
script>
body>
指令
指令的本质是自定义属性
常用指令：
- v-clock
这个指令保持在元素上直到关联实例结束编译。
插值表达式存在“闪动”问题，使用v-clock指令可解决。
用法：
1、提供样式
[v-clock]{
display:none;
}
2、在插值表达式所在的标签中添加v-clock指令
原理：
先通过样式隐藏内容，在内存中进行值的替换，替换好之后再显示最终的结果。
<style type="text/css">
[v-clock]{
display:none;
}
style>
<body>
<div id="app">
<div v-clock>{
{msg}}div>
div>
<script type="text/javescript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:"#app"
data:{
msg:'hello vue'
}
});
script>
body>
- v-text
更新元素的 textContent。
填充纯文本，相比插值表达式更加简洁。
下面两行代码的效果一样：
<span v-text="msg">span>
<span>{
{msg}}span>
- v-html
更新元素的 innerHTML。
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
<body>
<div id="app">
<div v-html='msg'>div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'HTML'
}
})
script>
body>
- v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
数据响应式：数据的变化导致页面内容的变化
v-once 只编译一次，显示内容之后不再具有响应式功能
应用场景：
如果显示的信息后续不需要再修改，使用 v-once 指令可以提高性能。
- v-model
1、你可以用 v-model 指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
2、v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
- v-on
绑定事件监听器。
事件类型由参数指定。
表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。
用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
<button v-on:click="doThis">button>
<button @click="doThis">button> //缩写形式
事件函数参数传递
<button v-on:click="doThis('hi',$event)">Say hibutton> //hi是普通参数，$event是事件对象，写法固定
1、如果事件直接绑定函数名称，默认事件函数的第一个参数传递事件对象
2、如果事件绑定函数调用，事件对象必须作为最后一个参数显示传递并且参数名称必须是$event
事件修饰符
.stop 阻止冒泡
<a v-on:click.stop="doThis">a>
.prevent 阻止默认行为
<a v-on:click.prevent="doThis">跳转a> //点击a标签后不在进行跳转
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
按键修饰符
.enter 回车键
<input v-on:keyup.enter="submit">
.delete 删除键
<input v-on:keyup.delete="dothis">
//自定义按键修饰符
//全局config.keyCodes对象
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
Vue.config.keyCodes.abc=65 //abc是自定义的按键修饰符名，65是按键对应event.keyCode值
<script>
- v-bind
属性绑定
<img v-bind:src="imageSrc">
<img :src="imageSrc"> //缩写形式
样式绑定
1、class样式处理
默认的class会保留
//对象语法
<div id="app">
<div v-bind:class="{ active:isActive }">div>
<button v-on:click="handle">切换button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
isActive:true
},
methods:{
handle:function(){
//控制isActive值在true和false之间进行切换
this.isActive=!this.isActive;
}
}
})
script>
//数组语法
<div id="app">
<div v-bind:class="[activeClass,errorClass]">div>
<button v-on:click="handle">切换button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
activeClass:'active',
errorClass:'error'
},
methods:{
handle:function(){
//控制isActive值在true和false之间进行切换
this.activeClass='';
this.errorClass='';
}
}
})
script>
//结合使用
<div id="app">
<div v-bind:class="[activeClass,errorClass，{test:isTest}]">div>
<div v-bind:class='arrClasses'>div>
<div v-bind:class='objClasses'>div>
<button v-on:click="handle">切换button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
activeClass:'active',
errorClass:'error',
isTest:true,
arrClasses:['active','error'],
objClasses:{
active：true，
error:true
}
},
methods:{
handle:function(){
//控制isActive值在true和false之间进行切换
this.activeClass='';
this.errorClass='';
this.isTest=false;
}
}
})
script>
2、style样式处理
<div id="app">
<div v-bind:style="{
border:borderStyle,width:widthStyle}">div> //对象语法
<div v-bind:style="objStyles">div>
<div v-bind:style='[objStyle,overrideStyles]'>div> //数组语法
<botton v-on:click='handle'>切换button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
borderStyle:'1px solid blue',
withStyle:'100px',
heightStyle:'200px',
objStyles:{
border:'1px solid green',
width:'200px',
height:'100px'
},
overrideStyle:{
border:'5px solid orange'
}
},
methods:{
handle:function(){
this.heightStyle='100px';
this.objStyles.width='100px';
}
}
});
script>
- v-show
根据表达式之真假值，切换元素的 display CSS property
(已经渲染到了页面)
<div id="app">
<div v-show='flag'>测试v-showdiv>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
score:10,
flag:false
},
methods:{
handle:function(){
this.flag=!this.flag;
}
}
})
script>
- v-for
1、v-for遍历数组
<li v-for='item in list'>{
{item}}li>
<li v-for='(item,index) in list'>{
{item}}+'-----'+{
{index}}li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{
{item}}+'---'+{
{index}}li>
<div id="app">
<div>水果列表div>
<ul>
<li :key='item.id' v-for='item in myFruits'>
<span>{
{item.ename}}span>
<span>{
{item.cname}}span>
li>
ul>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
myFryits:[{
ename:'apple',
cname:'苹果'
}，{
ename:'orange',
cname:'橘子'
}，{
ename:'banana',
cname:'香蕉'
}]
}
})
script>
2、v-for遍历对象
<div v-for='(value,key,index) in object'>div>