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>

运行效果

  图一 :

图二 :

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模板语法(二)的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. Vue模板语法(一)

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定(2022/7/3)

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  7. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  8. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  9. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. 数组转JSON对象

    代码: function arrayToJson(arr){ var js={}; for(var i=0;i<arr.length;i++){ js[arr[i].name]=arr[i].v ...

  2. array_walk、array_map、array_filter 的用法

    array_walk.array_map.array_filter  和 foreach 都有循环对数组元素进行处理的功能. 一.array_walk 用法 1.循环数组,回调处理(并不修改数组元素的 ...

  3. vue3 父组件给子组件传值 provide & inject

    介绍 provide() 和 inject() 可以实现嵌套组件之间的数据传递. 这两个函数只能在 setup() 函数中使用. 父级组件中使用 provide() 函数向下传递数据. 子级组件中使用 ...

  4. ActiveX的AssemblyInof.cs文件 IObjectSafety  接口

    ActiveX的AssemblyInof.cs文件 IObjectSafety  接口 [Guid("D4176A17-2A33-4903-8F37-9EBDD7CAFFD3"), ...

  5. Postman请求后台报错:Invalid character found in method name. HTTP method names must be tokens

    在使用Postman请求后台时Postman出现 开发工具控制台报 信息: Error parsing HTTP request header Note: further occurrences of ...

  6. PostgreSQL SERIAL创建自增列

    PostgreSQL SERIAL创建自增列 本文我们介绍PostgreSQL SERIAL,并展示如何使用serial类型创建表自增列. PostgreSQL SERIAL伪类型 PostgreSQ ...

  7. 转 CentOS 初体验十四:阿里云安装Gitlab

        原文 https://blog.csdn.net/zhaoyanjun6/article/details/79144175 非Unix操作系统(Windows) GitLab是专为Unix操作 ...

  8. 跨服务器查询sql语句样例(转)

    若2个数据库在同一台机器上: insert into DataBase_A..Table1(col1,col2,col3----) select col11,col22,col33-- from Da ...

  9. MySql时区修改

    1.查看当前时间 > select curtime(); #或select now()也可以+-----------+| curtime() |+-----------+| 15:18:10 | ...

  10. spring常用的事务传播属性说明

    事务Transaction,就是一组操作数据库的动作集合.事务是现代数据库理论中的核心概念之一.如果一组处理步骤或者全部发生或者一步也不执行,我们称该组处理步骤为一个事务.当所有的步骤像一个操作一样被 ...