vue组件

最新推荐文章于 2022-08-04 22:15:28 发布

我是小白很白

最新推荐文章于 2022-08-04 22:15:28 发布

阅读量42

点赞数

文章标签： html5 html vue.js

本文链接：https://blog.csdn.net/weixin_46654644/article/details/120214272

版权

【双向绑定 v-model】
v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
数据驱动,双向绑定，能同时使用也能修改: 改Model会影响View,改View会影响Model
<input type="text" v-model="绑定的对象名" />

【闪现 v-cloak】
在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;
实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题
<style>
[v-cloak]{
   display: none;
       }
   </style>

【单击事件 v-on：click】
v-on指令用来给HTML元素添加Vue事件,
用:指定事件的触发方式v-on:可以简写成一个@click=" （对象）函数内容"自增就后面加++
@click为v-on:click的缩写

<button v-on:click="函数名()">单机</button>
<button v-on:dblclick="函数名()">双击</button>

【绑定 v-bind】
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量
<a :href="url">点我跳转3</a>

【Vue 组件】
–1,概述
当想要扩展HTML的功能时,使用vue定义一些组件.
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
【使用】
//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果

<全局组件>
Vue.component('Hellocom',{//组件名
       template : '<h1>你好 Vue组件</h1>' //组件的显示效果
           })
<局部组件>
el:'#d1' ,
   // 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
       components: {
       'person':{//组件名
       template : '<h1>你好 person组件</h1>' //组件的显示效果

【组件使用：全局组件和局部组件】
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue 组件Component</title>
       
       <script src="js/vue.js"></script>
   </head>
   <body>
       
       <div id="app">
           
           <Hellocom></Hellocom>

       </div>

       <div id="d1">
           <Hellocom></Hellocom>
           <person></person>
       </div>
       <script>
           //4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
           //Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
           Vue.component('Hellocom',{
               template : '<h1>你好 Vue组件</h1>' //组件的显示效果
           })
           //3. 创建Vue对象
           new Vue({
               el:'#app'
           })
           new Vue({
               el:'#d1' ,
               // 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
               components: {
                   'person':{//组件名
                       template : '<h1>你好 person组件</h1>' //组件的显示效果
                   }
               }
           })

       </script>
   </body>
</html>

我是小白很白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件

【双向绑定 v-model】v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上数据驱动,双向绑定，能同时使用也能修改: 改Model会影响View,改View会影响Model<input type="text" v-model="绑定的对象名" /> 【闪现 v-cloak】在标签中增加指令：v-cloak增加style标签，[v-cloak]属性选择器，设置先不展示display:none;实现在页面未渲染完成时先...
复制链接

扫一扫