Vue模板语法(二)

时间:2022-08-30 06:39:11

Vue基础模板语法 二

1. 样式绑定

1.1 class绑定
      使用方式:v-bind:class="expression"
      expression的类型:字符串、数组、对象
     
  1.2 style绑定
      v-bind:style="expression"
      expression的类型:字符串、数组、对象

2. 事件处理器

  2.1 事件修饰符
      Vue通过由点(.)表示的指令后缀来调用修饰符,
      .stop
      .prevent
      .capture
      .self
      .once 
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>
  2.2 按键修饰符
      Vue允许为v-on在监听键盘事件时添加按键修饰符:
      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">
      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">
      全部的按键别名:
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta     
 

3. vue表单

用v-model指令在表单控件元素上创建双向数据绑定

   3.1 常用控件
       文本框/密码框/文本域/隐藏域
       单选复选框/多选复选框
       下拉框

4、代码

  只演示部分功能

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue样式绑定和事件处理</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style type="text/css">
.a {
color: red;
} .b {
color: blue;
} .c {
font-size: 60px;
} /* div {
padding: 60px;
} */
</style>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>样式绑定</h3>
<span :class='aClz'>好好学习,</span>
<span :class='bClz'>好好学习,</span>
<span :class='cClz'>好好学习,天天向上。</span>
</li>
<li>
<h3>事件处理-阻止冒泡</h3>
<div style="background-color: red;width: 600px;height: 600px;" @click.stop="a">
<div style="background-color: blue;width: 500px;height: 500px;" @click.stop="b">
<div style="background-color: yellow;width: 300px;height: 300px;" @click.stop="c">
<div style="background-color: pink;width: 200px;height: 200px;" @click.stop="d">
</div>
</div>
</div>
</div>
</li>
<li>
<h3>事件处理-按钮只能点击一次</h3>
{{info}}<input type="text" v-model="msg" />
<button @click="e">无限点击</button>
<button @click.once="e">单次点击</button>
</li>
<li>
<h3>按键修饰符-回车键提交事件</h3>
{{info}}<input type="text" v-model="msg" v-on:keyup.enter="e" />
<button @click="e">无限点击</button>
<button @click.once="e">单次点击</button>
</li>
<li>
<h3>select标签</h3>
<select name="hobby" v-model="selectedIds">
<option v-for="d in datas" :value="d.id">{{d.name}}</option>
</select>
选中的值:{{selectedIds}}
</li>
<li>
<h3>checkbox-复选框标签</h3>
<div v-for="d in datas">
<input type="checkbox" :value="d.id" name="likes" v-model="selectedIdArr" />{{d.name}}
</div>
选中的值:{{selectedIdArr}}
</li>
</ul>
</div> </body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
aClz: 'a',
bClz: 'b',
cClz: ['b', 'c'],
msg: '',
info: '',
datas: [{
id: 1,
name: '吃'
},
{
id: 2,
name: '喝'
},
{
id: 3,
name: '玩'
}
],
selectedIds:'',
selectedIdArr:[]
},
methods: {
a() {
alert('a事件触发');
alert(this.selectedIds);
},
b() {
alert('b事件触发');
},
c() {
alert('c事件触发');
},
d() {
alert('d事件触发');
},
e() {
this.info = this.msg;
this.msg = '';
}
}
})
</script> </html>

运行效果

  图一 :

Vue模板语法(二)

图二 :

Vue模板语法(二)

5. vue组件

5.1 组件简介
      组件(Component)是Vue最强大的功能之一
      组件可以扩展HTML元素,封装可重用的代码
      组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

  5.2 全局和局部组件
      全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
      局部组件: new Vue({el:'#d1',components:{...}})
 
      注册后,我们可以使用以下方式来调用组件:
      <tagName></tagName>
 

6. 自定义事件

监听事件:$on(eventName)
   触发事件:$emit(eventName)

   注1:Vue自定义事件是为组件间通信设计  
        vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定
    
        父Vue实例->Vue实例,通过prop传递数据
        子Vue实例->父Vue实例,通过事件传递数据
   注2:事件名
        不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
        建议使用“短横线分隔命名”,例如:three-click
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>局部组件的注册</h3>
<!-- 具有侵入性 -->
<my-button></my-button> </li>
<li>
<h3>全局组件的注册</h3>
<my-button2></my-button2>
</li>
<li>
<h3>组件的通信(父传子)</h3>
<my-button m='zs'></my-button>
</li>
<li>
<h3>组件的通信(子传父)</h3>
<my-button m='ls' @three-click='xxx'></my-button>
</li>
</ul>
</div> </body>
<script type="text/javascript">
Vue.component('my-button2', {
template: '<button @click="doSubmit">被点击了{{n}}次</button>',
data() {
return {
n: 0
}
},
methods: {
doSubmit() {
this.n += 1;
}
}
}) new Vue({
el: "#app",
data() {
return { }
},
components: {
'my-button': {
props:['m'],
template: '<button @click="doSubmit">被{{m}}点击了{{n}}次</button>',
data() {
return {
n: 0,
zhedie:'折叠效果'
}
},
methods: {
doSubmit() {
this.n += 1;
// 注册一个事件,让外部调用,然后顺便接受内部的值
if(this.n%3==0){
this.$emit('three-click',this.zhedie);
}
}
}
}
},
methods:{
xxx(v){
alert(v);
}
}
})
</script> </html>

运行效果:

Vue模板语法(二)

Vue是一个很有趣的东西,你越去扩展就会越觉得有趣!

谢谢观看!!!

相关文章