Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)

简介: Vue03基础语法(样式绑定、事件处理器、表单、自定义指令、vue组件、组件通信【自定义事件】)

一.样式绑定


1.class绑定

使用方式:v-bind:class=“expression”

expression的类型:字符串、数组、对象

2.style绑定

v-bind:style=“expression”

expression的类型:字符串、数组、对象

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style>
      .a{
        font-size: 36px
      }
      .b{
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <p>基本样式绑定</p>
      <span class="a">犯我华夏</span>
      <span class="b">虽远必诛</span><br>
      <span :class="c">犯我华夏</span>
      <span :class="d">虽远必诛</span><br>
      <p>样式二</p>
      <span style="font-size:60px">犯我华夏,虽远必诛</span><br>
      <span :style="{fontSize:e}">犯我华夏,虽远必诛</span>
    </div>
    <script>
      //创建Vue实例对象
      new Vue({
        // 绑定边界
        el: '#app',
        //定义静态数据
        data() {
          return {
            c:'a',
            d:'b',
            e:'60px'
          }
        }
      }); 
    </script>
  </body>
</html>


二.事件处理器


事件监听可以使用v-on 指令

事件冒泡,如图

@click.stop 加上stop事件修饰符后的效果

once修饰符修饰,只能点击一次

1.事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符,

.stop

.prevent

.capture

.self

.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>

注1:什么是事件冒泡?

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      


三.Vue表单


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

1.常用控件

文本框/密码框/文本域/隐藏域

单选复选框/多选复选框

单选按钮

下拉框

2.修饰符

.lazy

默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步

.number

将用户的输入值转为 Number 类型

.trim

自动过滤用户输入的首尾空格

注1:H5提供的新方法

JSON.parse():只能解析json形式的字符串变成json,安全性高一些

JSON.stringify():json转换为字符串,解析的时候会自动加上引号

效果

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      姓名:<input type="text" v-model="name"><br>
      密码:<input type="password" v-model="pwd"><br>
      年龄:<input type="text" v-model="age"><br>
      年龄:
      <input type="radio" name="sex" v-model="sex" v-model="age" value="1">男
      <input type="radio" name="sex" v-model="sex" v-model="age" value="0">女<br>
      爱好:
      <span v-for="n in likes">
        <input type="checkbox" :value="n.id" v-model="myLike">{{n.name}}
      </span><br>
      类别: 
      <select v-model="myType">
        <option v-for="n in types" :value="n.id">{{n.name}}</option>
      </select><br>
      备注:
      <textarea rows="10" cols="20" v-model="remark">
        
      </textarea><br>
      确认: <input type="checkbox" value="1" v-model="ok"><br>
      <button :disabled="isShow" @click="do_sub" >提交</button>
    </div>
    <script>
      //创建Vue实例对象
      new Vue({
        // 绑定边界
        el: '#app',
        //定义静态数据
        data() {
          return {
            name: null,
            pwd: null,
            age: 10,
            sex: 1,
            likes: [
              {id: 1,name: '唱'},
              {id: 2,name: '跳'},
              {id: 3,name: 'rap'},
              {id: 4,name: '篮球'}
            ],
            types: [
              {id: 1,name: '清纯'},
              {id: 2,name: '御姐'},
              {id: 3,name: '萝莉'},
              {id: 4,name: 'office lady'}
            ],
            remark: '成年人不做选择....',
            ok: false,
            myLike: [],
            myType: null
          }
        },
        methods:{
          do_sub(){
            var obj = {
              name: this.name,
              pwd: this.pwd,
              age: this.age,
              likes: this.myLike,
              type: this.myType,
              remark: this.remark
            }
            console.log(obj);
          }
        },
        computed: {
          isShow() {
            return !this.ok
          }
        },
      }); 
    </script>
  </body>
</html>


四.自定义指令


除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令,根据作用范围又分为:全局指令/局部指令


Vue.directive(“focus”,{});//全局指令


new Vue({

el:“#d1”,

directives:{//局部指令

focus:{}

}

});


指令定义函数提供了几个钩子函数用来帮助实现功能(可选)


  1. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
  2. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  3. update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  5. unbind: 只调用一次, 指令与元素解绑时调用。


钩子函数的参数有


  1. el: 指令所绑定的元素,可以用来直接操作 DOM 。
  2. binding: 一个对象,包含以下属性:
  3. name: 指令名,不包括 v- 前缀。
  4. value: 指令的绑定值, 例如: v-my-directive=“1 + 1”, value 的值是 2。
  5. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  6. expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” , expression 的值是 “1 + 1”。
  7. arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
  8. modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  9. vnode: Vue 编译生成的虚拟节点。
  10. oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。


五.Vue组件


5.1组件简介

组件(Component)是Vue最强大的功能之一

组件可以扩展HTML元素,封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

5.2 全局和局部组件

全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。

局部组件: new Vue({el:‘#d1’,components:{…}})

注册后,我们可以使用以下方式来调用组件:

5.3 props

props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 “prop”


注1:因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods

以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。


注2:当我们定义这个 组件时,你可能会发现它的data并不是像这样直接提供一个对象

data: {
  count: 0
}
取而代之的是,一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
  return {
  count: 0
  }
} 
注3:定义组件名的方式有两种
    短横线分隔命名(建议使用) 
    Vue.component('my-component-name', { /* ... */ }),引用方式:<my-component-name>

首字母大写命名
    Vue.component('MyComponentName', { /* ... */ }),引用方式: <my-component-name>和<MyComponentName>都是可接受的   

注4:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,
    camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
    props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

注5:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

希望每个 prop 都有指定的值类型
    props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise // or any other constructor
    }

组件通信(父传子)

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <my-button m="zs"></my-button>
      <my-button m="王五"></my-button>
    </div>
    <script>
      //创建Vue实例对象
      new Vue({
        // 绑定边界
        el: '#app',
        components:{
          'my-button':{
            props: ['m'],
            template: '<button @click="do_sub">{{m}}提交审核{{n}}次</button>',
            data(){
              return {
                n: 0
              }
            },
            methods:{
              do_sub(){
                this.n++;
              }
            }
          }
        },
        //定义静态数据
        data() {
          return {
            
          }
        }
      }); 
    </script>
  </body>
</html>


六.自定义事件


监听事件:$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.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <my-button m="zs" @three-click="funa"></my-button>
      <my-button m="王五" @four-click="funb"></my-button>
    </div>
    <script>
      //创建Vue实例对象
      new Vue({
        // 绑定边界
        el: '#app',
        components:{
          'my-button':{
            props: ['m'],
            template: '<button @click="do_sub">{{m}}提交审核{{n}}次</button>',
            data(){
              return {
                n: 0
              }
            },
            methods:{
              do_sub(){
                let name = '张三';
                let sex = '男';
                let hobby = '小姐姐';
                this.n ++;
                //通过自定义事件来完成
                if(this.n % 3 ==0){
                  this.$emit('three-click',name,sex,hobby)
                }
                if(this.n % 4 ==0){
                  this.$emit('four-click',name,hobby)
                }
              }
            }
          }
        },
        //定义静态数据
        data() {
          return {
            
          }
        },
        methods:{
          funa(a,b,c){
            console.log(a,b,c)
          },
          funb(a,b,c){
            console.log(a,b,c)
          }
        }
      }); 
    </script>
  </body>
</html>
              this.n ++;
              //通过自定义事件来完成
              if(this.n % 3 ==0){
                this.$emit('three-click',name,sex,hobby)
              }
              if(this.n % 4 ==0){
                this.$emit('four-click',name,hobby)
              }
            }
          }
        }
      },
      //定义静态数据
      data() {
        return {
          
        }
      },
      methods:{
        funa(a,b,c){
          console.log(a,b,c)
        },
        funb(a,b,c){
          console.log(a,b,c)
        }
      }
    }); 
  </script>
</body>
目录
相关文章
|
2天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
13 6
|
7天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
16 1
|
2天前
|
JavaScript
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
7 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1014 0
|
2天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
12 4
|
1天前
|
JavaScript
vue知识点
vue知识点
7 2
|
2天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
9 1
|
2天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
13 1
|
7天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
8天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint