金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > Vue和微信小程序的区别,vue父子组件间传值

Vue和微信小程序的区别,vue父子组件间传值

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:43

1.设置值

vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是vue非常nice的一点。

JavaScript

<div id="app"> <input v-model="reason" placeholder="填写理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>
 
new Vue({
  el: '#app',
  data: {
   reason:''
  }
})

但是在小程序中,却没有这个功能。那怎么办呢?

当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中,通过this.setData({key:value})来将表单上的值赋值给data中的对应值。

下面是代码,可以感受一下:

JavaScript

<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" /> Page({ data:{ reason:'' }, bindReason(e) { this.setData({ reason: e.detail.value }) } })

1
2
3
4
5
6
7
8
9
10
11
12
<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
 
Page({
data:{
    reason:''
},
bindReason(e) {
    this.setData({
      reason: e.detail.value
    })
  }
})

当页面表单元素很多的时候,更改值就是一件体力活了。和小程序一比较,vuev-model简直爽的不要不要的。

        userName:'Jack'

```html
<p v-if="seen">Now you see me</p>
```

25、过渡

四、显示与隐藏元素

vue中,使用v-ifv-show控制元素的显示和隐藏

小程序中,使用wx-ifhidden控制元素的显示和隐藏

 

cd template

### 组件的命名

 

vue

父组件向子组件传递数据,只需要在子组件通过v-bind传入一个值,在子组件中,通过props接收,即可完成数据的传递,示例:

// 父组件 foo.vue <template> <div class="container"> <bar :title="title"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"我是标题" }, components:{ Bar } </script> // 子组件bar.vue <template> <div class="search-box"> <div :title="title" ></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
    title:"我是标题"
},
components:{
    Bar
}
</script>
 
// 子组件bar.vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
}
</script>

子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件。

        <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->

prop 是单向绑定的:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

小程序生命周期

图片 1

相比之下,小程序的钩子函数要简单得多。

vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。

  • onLoad: 页面加载
    一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
  • onShow: 页面显示
    每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成
    一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐藏
    navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载
    redirectTonavigateBack的时候调用。

        <Hello @hello="getData"></Hello>

```js
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
```

v-for = ‘book in books’

2.父子组件间通信

            default:function(){

当 prop 验证失败,Vue会在抛出警告 (如果使用的是开发版本)。

    (2)v-show

2.取值

vue中,通过this.reason取值

小程序中,通过this.data.reason取值

图片 2

 

<template>

### Vue 内置指令

           })

小程序

父组件向子组件通信和vue类似,但是小程序没有通过v-bind,而是直接将值赋值给一个变量,如下:

<tab-bar currentpage="index"></tab-bar> 此处, “index”就是要向子组件传递的值

1
2
3
<tab-bar currentpage="index"></tab-bar>
 
此处, “index”就是要向子组件传递的值

在子组件properties中,接收传递的值

properties: { // 弹窗标题 currentpage: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: 'index' // 属性初始值(可选),如果未指定则会根据类型选择一个 } }

1
2
3
4
5
6
7
properties: {
    // 弹窗标题
    currentpage: {            // 属性名
      type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: 'index'     // 属性初始值(可选),如果未指定则会根据类型选择一个
    }
  }

子组件向父组件通信和vue也很类似,代码如下:

//子组件中 methods: { // 传递给父组件 cancelBut: function (e) { var that = this; var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数 this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用 }, } //父组件中 <bar bind:myevent="toggleToast"></bar> // 获取子组件信息 toggleToast(e){ console.log(e.detail) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//子组件中
methods: {  
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用
    },
}
 
//父组件中
<bar bind:myevent="toggleToast"></bar>
 
// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

    </div>

  1. 定义一个局部变量,并用 prop 的值初始化它

       });

五、事件处理

vue:使用v-on:event绑定事件,或者使用@event绑定事件,例如:

<button v-on:click="counter += 1">Add 1</button> <button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡

1
2
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

小程序中,全用bindtap(bind+event),或者catchtap(catch+event)绑定事件,例如:

<button bindtap="noWork">明天不上班</button> <button catchtap="noWork">明天不上班</button> //阻止事件冒泡

1
2
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡

 

<template>

```html
<body>
<div id="app">
<child>
<template scope="props">
<p>hello from parent</p>
<p>{{ props.text }}</p>
<p>{{ props.message }}</p>
</template>
</child>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: `
<div class="child">
<input v-model="message" />
<slot text="hello from child" :message="message"></slot>
</div>
`,
data () {
return {
message: 'child message'
}
}
})
new Vue({
el: '#app',
data: {
},
})
</script>
</body>
```

比如:

二、数据绑定

VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:

<img :src="imgSrc"/>

1
<img :src="imgSrc"/>

小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:

<image src="{{imgSrc}}"></image>

1
<image src="{{imgSrc}}"></image>

 

<script>

## 模板语法

              <span>123</span>

六、数据双向绑定

    },

```html
<div v-html="rawHtml"></div>
```

    在需要过渡的目标元素上使用transition特性,该特性可以和下面的资源一起使用:

三、列表渲染

直接贴代码,两者还是有些相似
vue:

JavaScript

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
 
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

小程序:

JavaScript

Page({ data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) <text wx:for="{{items}}">{{item}}</text>

1
2
3
4
5
6
7
8
9
10
Page({
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
 
<text wx:for="{{items}}">{{item}}</text>

 

    data(){

```html
<div v-bind:class="{ active: isActive }"></div>

    设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

八、父子组件通信

        }

#### 非父子组件通信

有两种使用方法:

九、废话

还有好多地方没写,之后再慢慢加上、精简。感觉自己写的有点冗余,大佬勿喷!!!
如果觉得有帮助,希望帮忙点个赞和收藏

图片 3

1 赞 2 收藏 评论

图片 4

Hello.vue 中写入

### 组件基础

    可以让一个子组件直接当前页面写click的监听事件,其他事件也是如此

vue生命周期

图片 5

</template>

```html
<body>
<div id="app">
<ul>
<li><a href="JavaScript:void(0)" @click="defaultView = 'register'">注册</a></li>
<li><a href="JavaScript:void(0)" @click="defaultView = 'login'">登陆</a></li>
</ul>
<div>
<component :is="defaultView"></component>
</div>
<hr><hr><hr><hr>
<div>
<!-- 可以使用 keep-alive 保持组件状态 -->
<keep-alive>
<component :is="defaultView"></component>
</keep-alive>
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
login: {
template: `
<form action="">
<div>
<label for="">用户名</label>
<input type="text" />
</div>
<div>
<label for="">密码</label>
<input type="password" />
</div>
<div>
<input type="submit" value="点击登陆" />
</div>
</form>
`
},
register: {
template: `
<form action="">
<div>
<label for="">用户名</label>
<input type="text" />
</div>
<div>
<label for="">密码</label>
<input type="password" />
</div>
<div>
<label for="">确认密码</label>
<input type="password" />
</div>
<div>
<label for="">验证码</label>
<input type="password" />
</div>
<div>
<input type="submit" value="点击注册" />
</div>
</form>
`
}
},
data: {
defaultView: 'login'
},
})
</script>
</body>
```

 

数据请求

在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。

    return {

#### 单向数据流

 

如果父组件想要调用子组件的方法

vue会给子组件添加一个ref属性,通过this.$refs.ref的值便可以获取到该子组件,然后便可以调用子组件中的任意方法,例如:

//子组件 <bar ref="bar"></bar> //父组件 this.$ref.bar.子组件的方法

1
2
3
4
5
//子组件
<bar ref="bar"></bar>
 
//父组件
this.$ref.bar.子组件的方法

小程序是给子组件添加id或者class,然后通过this.selectComponent找到子组件,然后再调用子组件的方法,示例:

//子组件 <bar id="bar"></bar> // 父组件 this.selectComponent('#id').syaHello()

1
2
3
4
5
//子组件
<bar id="bar"></bar>
 
// 父组件
this.selectComponent('#id').syaHello()

小程序和vue在这点上太相似了,有木有。。。
图片 6

 

图片 7

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

    (1)可以使用<transition name=”xx”>

一、生命周期

先贴两张图:

    <div class="hello">

```html
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>
```

25、过渡

七、绑定事件传参

vue中,绑定事件传参挺简单,只需要在触发事件的方法中,把需要传递的数据作为形参传入就可以了,例如:

JavaScript

<button @click="say('明天不上班')"></button> new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } })

1
2
3
4
5
6
7
8
9
10
<button @click="say('明天不上班')"></button>
 
new Vue({
  el: '#app',
  methods:{
    say(arg){
    consloe.log(arg)
    }
  }
})

小程序中,不能直接在绑定事件的方法中传入参数,需要将参数作为属性值,绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取,从而完成参数的传递,很麻烦有没有…

JavaScript

<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view> Page({ data:{ reason:'' }, toApprove(e) { let id = e.currentTarget.dataset.id; } })

1
2
3
4
5
6
7
8
9
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
    reason:''
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})

图片 8

 

</template>

```html
<body>
<div id="app">
<my-awesome-list :todos="todos">
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('my-awesome-list', {
props: ['todos'],
template: `
<ul>
<slot name="item"
v-for="item in todos"
:text="item.title">
<!-- fallback content here -->
</slot>
</ul>
`
})
new Vue({
el: '#app',
data: {
todos: [
{ id: 1, title: '吃饭' },
{ id: 2, title: '睡觉' },
{ id: 3, title: '打豆豆' },
]
},
})
</script>
</body>
```

               }

1.子组件的使用

vue中,需要:

  1. 编写子组件
  2. 在需要使用的父组件中通过import引入
  3. vuecomponents中注册
  4. 在模板中使用

 

//子组件 bar.vue <template> <div class="search-box"> <div @click="say" :title="title" class="icon-dismiss"></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } }, methods:{ say(){ console.log('明天不上班'); this.$emit('helloWorld') } } </script> // 父组件 foo.vue <template> <div class="container"> <bar :title="title" @helloWorld="helloWorld"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"我是标题" }, methods:{ helloWorld(){ console.log('我接收到子组件传递的事件了') } }, components:{ Bar } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(){
       console.log('明天不上班');
       this.$emit('helloWorld')
    }
}
</script>
 
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>
 
<script>
import Bar from './bar.vue'
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log('我接收到子组件传递的事件了')
    }
},
components:{
    Bar
}
</script>

小程序中,需要:

  1. 编写子组件
  2. 在子组件的json文件中,将该文件声明为组件
{ "component": true }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bfc908165305-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bfc908165305-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f6a1146bfc908165305-2" class="crayon-line crayon-striped-line">
  &quot;component&quot;: true
</div>
<div id="crayon-5b8f6a1146bfc908165305-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在需要引入的父组件的json文件中,在usingComponents填写引入组件的组件名以及路径
"usingComponents": { "tab-bar": "../../components/tabBar/tabBar" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bff494634246-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bff494634246-1" class="crayon-line">
&quot;usingComponents&quot;: {
</div>
<div id="crayon-5b8f6a1146bff494634246-2" class="crayon-line crayon-striped-line">
    &quot;tab-bar&quot;: &quot;../../components/tabBar/tabBar&quot;
</div>
<div id="crayon-5b8f6a1146bff494634246-3" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在父组件中,直接引入即可
&lt;tab-bar currentpage="index"&gt;&lt;/tab-bar&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c02109159426-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c02109159426-1" class="crayon-line">
&lt;tab-bar currentpage=&quot;index&quot;&gt;&lt;/tab-bar&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


具体代码:  


// 子组件 &lt;!--components/tabBar/tabBar.wxml--&gt; &lt;view
class='tabbar-wrapper'&gt; &lt;view class='left-bar
{{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'&gt;
&lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
&lt;view&gt;首页&lt;/view&gt; &lt;/view&gt; &lt;view
class='right-bar {{currentpage==="setting"?"active":""}}'
bindtap='jumpToSetting'&gt; &lt;text class='iconfont
icon-shezhi'&gt;&lt;/text&gt; &lt;view&gt;设置&lt;/view&gt;
&lt;/view&gt; &lt;/view&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c06935082908-1" class="crayon-line">
// 子组件
</div>
<div id="crayon-5b8f6a1146c06935082908-2" class="crayon-line crayon-striped-line">
&lt;!--components/tabBar/tabBar.wxml--&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-3" class="crayon-line">
&lt;view class='tabbar-wrapper'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-4" class="crayon-line crayon-striped-line">
  &lt;view class='left-bar {{currentpage===&quot;index&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToIndex'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-5" class="crayon-line">
    &lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-6" class="crayon-line crayon-striped-line">
    &lt;view&gt;首页&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-7" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-8" class="crayon-line crayon-striped-line">
  &lt;view class='right-bar {{currentpage===&quot;setting&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToSetting'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-9" class="crayon-line">
    &lt;text class='iconfont icon-shezhi'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-10" class="crayon-line crayon-striped-line">
    &lt;view&gt;设置&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-11" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-12" class="crayon-line crayon-striped-line">
&lt;/view&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

效果图:

```html
<table>
<my-row>...</my-row>
</table>
```

        <cc-button type="primary">主要按钮</cc-button>

Vue和微信小程序的区别、比较

2018/08/04 · 基础技术 · Vue, 小程序

原文出处: 卖女孩的小火柴   

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。

</script>

- 注册全局组件

(3)     给标签填值:{{$data.vueText}}

在子组件中使用 $emit(事件名,数据) 触发一个自定义事件发送数据

```js
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
```

       <script type="text/javascript" src="js/vue.js" ></script>

        <h4>访问子组件的数据:{{msg}},{{name}}</h4>

在这种情况下,模板不再简单和清晰。
这就是对于任何复杂逻辑,你都应当使用计算属性的原因。

           </span>

      age:'22',

我们可以为组件的 props 指定验证规格。
如果传入的数据不符合规格,Vue 会发出警告。
当组件给其他人使用时,这就很有用了。

    父组件:

            {{age}}<br>

```js
Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: {
message: 'hello'
}
})
```

比如:v-for="book in books |filterBy '水' in 'name' | orderBy sortParam

export default {

组件是 Vue.js 最强大的功能,组件可以扩展自定义 HTML 元素,封装可重用代码。

25、prop绑定类型

<script>

- 响应插值:

              el: "#app", //选定id

            // 此处的 this 表示当前子组件的实例


    实例创建的初始化步骤,建立数据观察

        <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->

打开终端,启动开发预览服务:

    </div>

}

双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:

              props: ['name'],

            type:String,

```js
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
```

    比如:<cc-button @click.native="open">弹出框message</cc-button>

      user:{

在这里 `href` 是参数,告知 `v-bind` 指令将该元素的 `href` 属性与表达式 `url` 的值绑定。

9、  自定义的指令

  },

然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。
这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。

    比如:<cc-button @click.native="open">弹出框message</cc-button>

        // 基础类型检测 (`null` 指允许任何类型)

### 解决表达式闪烁

11、              v-if和v-else

            {{ageOne}}<br>

```html
<child message="hello!"></child>
```

                   《1》阻止冒泡和默认行为:<a @click.stop.prevent='doThis' />

npm run dev

为了让组件可以组合,我们需要一种方式来混合父组件的内容和子组件自己的模板。
这个过程被称为 **内容分发**(或 “transclusion”)。

                  return {

    </div>

 

21、created

        age:{

- 实例属性

                  message: "Hello World!" // 输出message的内容

            {{message}} <br>

#### 注册全局组件:`Vue.component(tagName, options)`

    比如:

        <h4>访问自己的数据:

在 Vue.js 中,父子组件的关系可以总结为 `props down, events up`:

             },  

      name:'tom',

#### Prop 验证

显示:

</template>

<!-- 可以在数组语法中使用对象语法: -->
<div v-bind:class="[{ active: isActive }, errorClass]">
```

        delBook:function(book){

在 App.vue 中写入

### 组件通信

                            }

<script>

  • 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项
  • data: 属性数据
  • computed: 计算属性
  • methods: 方法
  • el: 挂载点
  • directives: 自定义指令
  • filters: 自定义过滤器
  • ...
  • 全部选项可以在 API 文档中查看:

           })

      money:'123'

#### 使用 prop 传递数据

(5)v-show

      msg:'',

### 动态组件

    (3)v-for(只有插入和删除时触发,使用vue-animated-list插件)

}

过滤器使用格式:

有两种给值的方法:

App.vue 中写入

父组件是使用 props 传递数据给子组件,
但如果子组件要把数据传递回去,应该怎样做?
那就是自定义事件!

                         level: function() {

        <!-- 在页面中直接渲染即可 -->

```js
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
```

       </template>

        ageOne:{

指令(Directives)是带有 `v-` 前缀的特殊属性。
指令属性的值预期是单一 JavaScript 表达式(除了 `v-for`,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

<div id="app">

        // 数值且有默认值  如果父组件中没有该数据绑定,显示以下的默认值

  • $watch
  • $set Vue.set 的别名
  • $delete Vue.delete 的别名

19、过滤(/排序)

        send(){

```js
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
```

                  }

图片 9

- 当父组件的属性发生变化时,将传导给子组件

6、  Vue组件化三

</template>

 

子组件:

  components:{

### 调试 Vue

              },

        <Hello :message="msg" :name="name" :age="age"  :user="user" :money="money"></Hello>

```js
data: function () {
return {
message: '组件的 data 必须是函数返回一个json字面量对象'
}
}
```

                   (2)定义一个模板<template>,用来设置刚才定义的<custom>

      msg:'父组件',

  • `<span>Message: {{ msg }}</span>`
  • 注意: Mustache 语法不能在 HTML 属性中使用,应使用 `v-bind` 指令
  • 一次性插值:
  • `<span v-once>This will never change: {{ msg }}</span>`
  • 注意:会影响该节点及内部节点所有的绑定

                  clickListener: function() {

方式二 :为组件的 prop 指定 验证 规则,如果传入的数据不符合要求,Vue 会发出警告

  • JavaScript内联模版字符串
  • `.vue` 组件

              el: '#app'

</template>

在这里参数是监听的事件名:`click`。

 

vue init webpack-simple template

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项:

<a :href="url"></a>

  }

![vue-logo](img/logo.png)

new Vue({

一、子组件访问父组件的数据

#### 编译作用域

(3)v-class

图片 10

### v-if-else-elseif

v-for = ‘book in books’

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

有时候,可能想要在某个组件的根元素上绑定一个原生事件。
可以使用 `.native` 修饰 `v-on`。例如:

              template: '#template', // 模板对应的id

      this.name = name

#### 作用域插槽

 

      },

  • 当子组件模板只有一个没有属性的 slot 时
  • 父组件整个内容片段都将插入到 slot 所在的 DOM 位置
  • 并替换掉 slot 标签本身
  • 在 slot 标签中的任何内容都被视为 备用内容
  • 备用内容在子组件的作用域内编译
  • 并且只有宿主元素为空的时候,备用内容才会被编译显示出来

比如:

            {{msg}} <br>

示例如下:

v-bind可以缩写为:

        // 自定义验证函数

子组件要显式地用 `props` 选项声明它期待获得的数据:

比较语法:

在父组件在使用子组件的标签内监听子组件的触发事件,并在父组件中定义方法用来获取数据

  • 子组件通过 `events` 给父组件发送消息

比如:

    </div>

  • Number
  • Boolean
  • Function
  • Object
  • Array

    过滤可以是链式调用过滤器,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。

      user:{

- 如果子组件没有 `<slot>` 插口,否则父组件的内容会被丢弃

              data: function() {

    <div class="hello">

- 实例方法/数据

    (3)debounce

    <div class="hello">

自定义组件 `<my-row>` 被认为是无效的内容,因此在渲染的时候会导致错误。
变通的方案是使用特殊的 `is` 属性:

(3)在子组件的js中:

</script>

#### 对象语法

              }

            type:Object,

```bash
# npm install --save-dev browser-sync
# 将 browser-sync 包保存到开发依赖中
# 就可以执行 npm install 的时候加入 --production 选项不安装这个包
npm i -D browser-sync
```

(1)filteBy

二、父组件访问子组件的数据

  1. prop 作为初始值传入后,子组件想要把它当作局部数据来用
  2. prop 作为初始值传入后,由子组件处理成其它数据输出

           <custom name="赞"></custom>

  // 注册 Hello 组件

  • 子组件需要将它内部发生的事情告知给父组件

              props: ['name'], // <custom>对应的属性

App.vue 中写入

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

    在需要过渡的目标元素上使用transition特性,该特性可以和下面的资源一起使用:

import Hello from './assets/components/Hello.vue'

有时候两个组件也需要通信(非父子关系)。
在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

27、定义:class的样式

        },

```js
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
```

值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 $add, $set和 $delete 方法。

    // 5. 接收子组件传过来的数据


10、$remove

      msg:'父组件',

### 绑定 HTML Class

 

        },

  1. 当浏览器解析处理到添加了 `v-cloak` 属性的节点的时候,属性样式被作用上来,也就是说默认这个容器就是隐藏着的
  2. 然后当 Vue 程序解析渲染完HTML模板的时候,自动将容器上的 `v-cloak` 属性移除

用法:v-for='item in items'    
           v-for='(index, item) in items'    *数组则是索引,遍历对象则是键

<script>

- 可以是内联模板

    (4)组件动态

      age:'22',

```js
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
```

              props: ['name'],

在 Hello.vue 中写入

<!-- 使用 v-else 指令来表示 v-if 的“else 块” -->
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

        常见的按键有提供别名:
            ·enter
            ·tab
            ·delete
            ·esc
            ·space
            ·up
            ·down
            ·left
            ·right

        <h4>访问父组件中的数据:

在组件中,data 必须是函数,下面是错误的方式:

可以对数据进行这样处理:

            type: Number,

这里, v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。

    }

  // 注册 Hello 组件

```html
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
```

         (1)父组件:<input v-model="dialogmsg" type="text" />

  components:{

#### camelCase 和 kabab-case 命名规则

        } 

}

每个 Vue 实例都实现了事件接口:

       <script>

        <hr>

```html
<body>
<div id="app">
<p>{{ total }}</p>
<child v-on:increment="incrementTotal"></child>
<child v-on:increment="incrementTotal"></child>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: `
<div>
<span>{{ counter }}</span>
<button @click="increment">increment</button>
</div>`,
data () {
return {
counter: 0
}
},
methods: {
increment () {
this.counter += 1
this.$emit('increment')
}
}
})
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal () {
this.total += 1
}
}
})
</script>
</body>
```

new Vue({

    </div>

- v-text

                   通过true和false来控制元素是否显示

  data(){

## 表单控件绑定

               default: 'info'

        // 在此处定义事件,用来发送数据,也可直接写到 mounted 内自动发送

 

12、              声明一个Vue构造函数

        return {

- 目的:作用域插槽的目的就是可以将子组件内部的数据传递到外部

       比如:this.$dispatch("isShow", false);

        <h3>我是 hello 子组件</h3>

```html
{{ number + 1 }}

                         points: 300,

        }

第三,解析执行机制:

使用方法: 直接在new Vue里面添加对象:computed

            msg:'子组件',

```html
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
```

           vueText: "Hello World!" // 输出message的内容

      name:'',

### 指令

18、子组件向父组件传值

    Hello

```html
<div id="example">
<my-component></my-component>
</div>
```

    }

<template>

```html
<table>
<tr is="my-row"></tr>
</table>
```

           });

成功访问到父组件的数据

注册:

8、  指令缩写

// 引入 Hello 组件

## 搭建案例演示自动刷新环境

           <h1>{{message}}</h1>

    props:['message','name','user']

 

(3) *数组语法:v-bind:class='[classA, classB]'                       

            {{user.userName}}<br>

局部过滤器:

              data: function() {

在 props 内以对象的形式写入校验规则

组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。
它们之间必然需要相互通信:

    (2)v-show

npm i

- 实例选项:methods

比如:orderBy sortParam -1

            required:true

data: {
activeColor: 'red',
fontSize: 30
}

 

    Hello

- String

                  }

</script>

<!-- 直接绑定到一个样式对象 -->
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

9、  自定义的指令

            {{name}}<br>

  • 使用 $emit(eventName) 触发事件

(1)*变量语法:v-bind:class="{'class-a':isA, 'class-b':isB}"      

创建如下目录

- 每个 Vue.js 应用都是通过构造函数 Vue 创建的

});

    }

```css
[v-cloak] {
display: none;
}
```

           })

        <hr>

#### 属性

});

  }

-

可以对数据进行这样处理:

    }

- 父组件通过 `props` 向下传递数据给子组件

           <h1>{{message}}</h1>

    }

## 安装

           <custom name="踩"></custom>

    return {

#### 使用 JavaScript 表达式

                  }

                }

要指定验证规格,需要使用对象的形式,而不能用字符串数组:

    实时监测变化

      this.msg = msg,

```bash
npm init -y
```

        }

    Hello

- 实例选项:data

(8)v-with

在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据


    (1)在子组件的js中,触发事件

        </h4>

这里,字符串 'arg1' 将传给过滤器作为第二个参数,arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

              return `el-alert--${this.type}1`;//这里使用反单引号

<template>


v-on:可以缩写为@

    getData(msg,name){

data: {
activeClass: 'active',
errorClass: 'text-danger'
}

Vue.directive()

    methods:{

不必在全局注册每个组件。
通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:

<mydialog :my-messages="dialogmsg"></mydialog>

  },

正确的方式:

值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 $add, $set和 $delete 方法。

  // 注册 Hello 组件

Vue.js 实现了一个内容分发 API,参照了当前 Web 组件规范草案,
使用特殊的 `<slot>` 元素作为原始内容的插槽。

    设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

            default: 10

#### 修饰符

12、声明一个Vue构造函数

            }

  • 可以是 script 标签模板
  • 可以是 .vue 模板

       比如:

            validator:function(value){

- 父组件要给子组件传递数据

       events: {

<script>

### 自定义事件(父子通信)

29、@click.native

  }

你可以像绑定普通属性一样在模板中绑定计算属性。
Vue 知道 `vm.reversedMessage` 依赖于 `vm.message` ,
因此当 `vm.message` 发生改变时,所有依赖于 `vm.reversedMessage` 的绑定也会被重新计算进行更新。

Vue.component('tree', Tree);

  methods:{

# vuejs tutorial

比如:

        <h3>我是 App 父组件</h3>

#### 字面量语法 vs 动态语法

       <1>原本默认的样式

  data(){

### 插值

14、              响应式指令

            name:'tom'

```html
<my-component v-on:click.native="doTheThing"></my-component>
```

这是vue为数组扩展的删除的方法

<template>

{{ ok ? 'YES' : 'NO' }}

28、slot

export default {

```html
<a v-on:click="doSomething">
```

(1)filteBy

        <h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>

- Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性

              methods: {

            {{money}}<br>

## 列表渲染

  <div v-show="vShow">我是通过v-show来决定显不显示的</div>

        <h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>

在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

Vue.component('custom', {

    }

{{ message.split('').reverse().join('') }}

(5)v-show

            this.$emit('hello',this.msg,this.name)

- 编译作用域

              }

</script>

<!--
v-else-if,顾名思义,充当 v-if 的“else-if 块”。可以链式地使用多次:
v-else,,v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后
-->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
```

(2)orderBy

export default {

```html
<!-- CSS 属性名可以用驼峰式(camelCase)或名短横分隔命(kebab-case) -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

29、@click.native

            {{user.id}}<br>

  • 每个版本的更新日志见:
  • 独立 js 文件
  • 开发版本(未压缩):
  • 生产版本(压缩):
  • CDN:
  • NPM: `npm install vue`
  • Bower: `bower install vue`
  • 兼容 AMD 规范
  • 独立下载版本或通过 Bower 安装的版本已用 UMD 包装,因此它们可以直接用作 AMD 模块。

   (4)子组件的template可以直接使用{{myMessages}}

}

```html
<button v-bind:disabled="someDynamicCondition">Button</button>
```

<button @click="btnClick"></button>

Hello.vue 文件中写入

#### 单个 Slot

比如:

                return {

#### 文本

比如:

图片 11

安装 `browser-sync`:

法一:

    </div>

  • 在子组件中,在 `slot` 标签上通过属性的方式将 prop 数据传递到外部
  • 在父组件中,通过具有特殊属性 `scope` 的 `<template>` 元素,表示它是作用域插槽的模板
  • `scope` 的值对应一个临时变量名
  • 该变量接收来自子组件中通过 `slot` 元素属性传递的 prop 数据

// 注册

export default {

 

// 注册

</script>

## 事件处理器

28、slot

        message:String,

`type` 可以是下面原生的数据类型:

注意:Vue.component 要放在new Vue()之前,不然会有警告

        name:[String,Number],

```html
<body>
<div id="app">
<!-- 渲染为 <div>局部组件</div> -->
<my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
'my-component': {
template: '<div>局部组件</div>'
}
},
data: {
},
})
</script>
</body>
```

                     <div v-text="vText">

</script>

<!-- 根据条件切换列表中的 class ,可以用三元表达式: -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

new Vue({

        <!-- 触发 send 事件 ,发送数据 -->

- 如果一个单词就只写一个单词即可

                   比如:

export default {

**注意:Mustache 不能在 HTML 属性中使用,应使用 v-bind 指令:**

new Vue({

  components:{

<!--
通过 template 包装多个元素,渲染结果不包含 template
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
-->
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

    (1)lazy

        <h3>我是 App 父组件</h3>

```html
<div id="app" ng-cloak>
{{ message }}
</div>
```

          Vm.$el = “#id”

        <Hello :message="msg" :name="name" :user="user"></Hello>

  • `<slot>` 元素可以用一个特殊的属性 `name` 来配置如何分发内容
  • 多个 slot 可以有不同的名字。
  • 具名 slot 将匹配内容片段中有对应 slot 特性的元素
  • 仍然可以有一个匿名 slot,它是默认 slot
  • 作为找不到匹配的内容片段的备用插槽
  • 如果没有默认的 slot,这些找不到插槽的内容片段将被抛弃

 -->        data:{isA:true, isB:false}
(2)*对象语法:v-bind:class="classObj"                               

        </h4>

### 使用 Slot 分发内容

    插值,只会影响单次的改变,之后的改变不再发生变化,比如:

父组件在调用子组件时,绑定想要获取的父组件中的数据

  • 什么是 XSS 攻击:跨站脚本攻击
  • 后天或者后后天补课

           <button @click="count += 1">{{count}}</button>

    }

<!-- v-bind:class 指令可以与普通的 class 属性共存 -->
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
```

22、$watch

            }


    (1)在子组件的js中,触发事件

        money:{

```js
Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
```

          Vm.$el = “#id”

        <!-- 3. 在子组件标签内监听子组件事件的触发 -->

  • [选项/数据 - data]()
  • [深入响应式原理]()
  • 作用:根据视图抽象数据模型
  • 注意:视图中使用的数据必须在 data 中初始化
  • 每个 VUe 实例都会代理其 data 对象里所有的属性
    * 也可以通过 vue 实例的 $data 属性访问 data 中的数据
    * 建议:如果要使用 vm 读取或修改 data 中的数据,建议加上 vm.$data 去访问
  • 只有被初始代理的属性是响应式的
    * 如果是在实例创建之后添加新的属性到实例上,它不会触发视图更新
  • Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
  • Vue 不能检测到对象属性的动态添加或删除
  • 也就是说动态添加或删除的对象属性不是响应式的
  • 如果希望动态添加和删除对象的属性是响应式的则需要通过:
    * `Vue.set( object, key, value )`
    * 或 `vm.$set( object, key, value )`
  • 如果删除对象属性是响应式的:
    * `Vue.delete( object, key )`
    * 或 `vm.$delete( object, key )`

           <span>

父组件在调用子组件时,绑定想要获取的父组件中的数据

  • props 命名规则
  • camelCase 和 kebab-case
  • 动态 prop
  • v-bind
  • 字面量语法 vs 动态语法
  • 单向数据流

有两种给值的方法:

    <div class="hello">

  • 注册局部组件
  • 组件的模板
  • 组件的 data

比如:

        总之,作为一个程序员,我们要不断提高自己的专业知识素养,学习更新的东西,这样我们才能使自己更加强大。

组件的 template 必须具有一个根节点,否则,模板编译报错。

    比如:

        <h3>我是 App 父组件</h3>

#### 动态 prop

    父组件:

        <h3>我是 hello 子组件</h3>

通过保留的 `<component>` 元素,动态的绑定到它的 is 特性,
我们让多个组件可以使用同一个挂载点:

 

        // 可能是多种类型

示例如下:

           vueText: "Hello World!" // 输出message的内容

                return value > 100

#### 使用 v-on 绑定自定义事件

一个页面中要给要使用Vue的地方指定一个id,把他赋值给el。

}

- 使用 $on(eventName) 监听事件

       console.info(newVal, "|",oldVal)

<template>

  • 单个 Slot
  • 具名 Slot
  • 作用域插槽

    比如:

            {{name}}

```html
<body>
<div id="app">
<app-layout>
<h1 slot="header">顶部</h1>
<p>内容段落</p>
<p>内容段落</p>
<p slot="footer">底部信息</p>
</app-layout>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('app-layout', {
template: `
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})
new Vue({
el: '#app',
data: {},
})
</script>
</body>
```

(3)     给标签填值:{{$data.vueText}}

效果如下

```html
<!-- 可以把一个数组传给 v-bind:class ,以应用一个 class 列表 -->
<div v-bind:class="[activeClass, errorClass]">

16、              Class与Style绑定

        // 数组/对象的默认值应当由一个工厂函数返回

#### 具名 slot

               data: {

                    userName: 'Doctor'

渲染为:

       },

最后效果:

```html
<body>
<div id="app">
<bs-panel title="面板1">
面板1的内容
</bs-panel>
<bs-panel title="面板2">
面板2的内容
</bs-panel>
<bs-panel title="没有分发内容的面板">
</bs-panel>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('bs-panel', {
template: `
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ title }}</h3>
</div>
<div class="panel-body">
<slot>
只有才没有分发的内容时才会显示
</slot>
</div>
</div>
`,
props: {
title: { type: String, required: true }
}
})
new Vue({
el: '#app',
data: {},
})
</script>
</body>
```

<button @click="btnClick"></button>

    return {

### 绑定内联样式

                  message: "Hello World!" // 输出message的内容

        user:{

## 组件

    (5)在组件的根节点上,并且被Vue实例DOM化,(比如:vm.$appendTo(el))触

    // 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据

```html
<div id="example">
<div>A custom component!</div>
</div>
```

(7)v-repeat

        <!-- 在页面中直接渲染即可 -->

- 为什么不直接输出 HTML

    (5)在组件的根节点上,并且被Vue实例DOM化,(比如:vm.$appendTo(el))触

        }

- 在组合组件时,内容分发 API 是非常有用的机制

27、定义:class的样式

// 引入 Hello 组件

#### 参数

  template: '<div>This is a tree!</div>'

        },

#### 纯 HTML

// 定义

方式一 :子组件直接访问父组件的数据

  • 子组件动态绑定的 prop,当父组件更新,子组件所有的 prop 都会得到更新
  • 但是不会反过来
  • 也就是说,在子组件内部修改 prop 数据
    * 子组件内部会响应更新
    * 更新不会传导给父组件
    * 同时 Vue 会在控制台发出警告
    * 对象和数组除外
    * 如果 prop 是一个对象或数组,在子组件内部修改它会影响父组件的状态
    * 如果直接给 prop 中的对象或数组类型数据重新赋值,父组件也不会得到更新
  • 这是为了防止子组件无意间修改了父组件的状态
  • 这会让数据流的走向变得混乱而难以理解

           typeClass() {

      }


       </template>

import Hello from './assets/components/Hello.vue'

- 使用 prop 传递数据

(9)v-if: 根据v-if的值,真假删除/插入元素

        <!-- 子组件 -->

> 注意:Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,
> 因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用 **计算属性**。

                     alert(this.username);

  },

```html
<div>
<input type="text" v-on:keyup.enter="xxx">
</div>
```

       el: "#app", //选定id

        id:9876,

```html
<!-- in mustaches -->
{{ message | capitalize }}

    (3)v-for(只有插入和删除时触发,使用vue-animated-list插件)

</template>

第二,在 style 中加入一个属性选择器样式:

(1)     给输入框v-model=”vueText”

        <h4>访问父组件中的数据: {{message}},{{name}},{{user.id}}</h4>

```html
<!-- 基本用法 -->
<h1 v-if="ok">Yes</h1>

               el: "#vueForm",

注意:Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。


默认的排序是升序,如果想要排序是降序的话,就在原本排序条件后面加上一个小于0的复数就可以啦

export default {

在使用组件的时候,我们常常要像这样组合它们:

              template: '#template',

    }

```html
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
```

(9)v-if: 根据v-if的值,真假删除/插入元素

      name:'tom',

<div v-bind:id="'list-' + id"></div>
```

 

        <hr>

- 使用 v-on 绑定自定义事件

                   (3)js中创建Vue

        <!-- 6. 在页面中渲染 -->

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效:

<a v-bind:href="url"></a>

<script>


       <2>离开和进入的样式

    props:{

## Class 与 Style 绑定

    实时监测变化

    </div>

组件实例的作用域是孤立的。
这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。
要让子组件使用父组件的数据,我们需要通过子组件的props选项。

           <slot></slot>

    <div class="hello">

## vuejs 介绍

使用方法 :

  },

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
```

        </button>

        id:1234,

在 `v-bind` 用于 `class` 和 `style` 时, Vue.js 专门增强了它。
表达式的结果类型除了 **字符串** 之外,还可以是 **对象** 或 **数组** 。

21、created

      // 4. 初始化数据对象

## 使用 Vue 的一些经验

});

}

  • 过滤器可以用在两个地方:`mustache 插值` 和 `v-bind 表达式`

比如:

        <h3>我是 hello 子组件</h3>

另一个例子是 v-on 指令,它用于监听 DOM 事件:

                            return 'VIP会员'

  data(){

  • 和 {{}} 效果是一样
  • 但是 {{}} 会闪烁
  • 解决方法就是利用 v-text 绑定数据
  • 如果又想用 {{}}} 还需要避免闪烁
  • 使用 v-cloak 处理
  • v-html
  • 默认 {{}} 和 v-text 会把 html 格式字符串原样输出
  • 可以使用 v-html 将 html 格式字符串作为 HTML 渲染到节点中
  • v-show
  • 是否显示和隐藏
  • v-if
  • 是否渲染和移除
  • v-else
  • v-if 的 else 块
  • v-else-if
  • 是 v-if 的逻辑块
  • 同样的,也必须紧跟着 v-if
  • v-for
  • 循环遍历输出
  • v-on
  • DOM 元素的事件绑定
  • 例如:`v-on:click`、`v-on:blur`
  • v-bind
  • 动态绑定 HTML 属性
  • 例如:`v-bind:title`、`v-bind:class`
  • v-model
  • 和表单控件进行双向数据绑定
  • v-pre
  • 不处理指定节点及内部所有节点的 vue 规则
  • 例如可以用来显示原始的 Mustache 标签
  • 作用:跳过大量没有指令的节点可以加快编译速度
  • v-cloak
  • 可以处理表达式闪烁的问题
  • v-once
  • 一次性绑定,后续数据的更新不会响应

2、  Vue给值和内容

import Hello from './assets/components/Hello.vue'

#### v-on 缩写

           type: {

// 引入 Hello 组件

 

两者的区别是:如果放在里面的不用加$,如果是把对象提出来的话,那就要加上$,其他的对象名也是如此。

        // 必传且是字符串


<button v-on:click="btnClick"></button>

        <button @click="send">将子组件中的数据发送给父组件</button>

一些指令能接受一个“参数”,在指令后以冒号指明。
例如, v-bind 指令被用来响应地更新 HTML 属性:

<div>{{messageStr.split(",").reverse().join("|")}}</div>

        userName:'Jack'

因此,推荐使用字符串模板。

默认的排序是升序,如果想要排序是降序的话,就在原本排序条件后面加上一个小于0的复数就可以啦

    <div class="hello">

#### 局部注册组件:实例选项的 `components`

       默认是单向绑定,当父组件的属性改变时,将传给父组件,反之不会,这是为了防止子组件五一修改父组件的状态,这样的话,会让应用的数据难以理解,不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。

## 条件渲染

比如:orderBy sortParam -1


              }

```html
{{ message | filterA | filterB }}
```

17、父组件向子组件传值

使用:

<input v-model="age"number>

```html
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

           常见的按键有提供别名:
            ·enter
            ·tab
            ·delete
            ·esc
            ·space
            ·up
            ·down
            ·left
            ·right

- `<script type="text/x-template">`

    (2)在父组件的js中,创建实例时 `events`,监听事件

模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。
在模板中放入太多的逻辑会让模板过重且难以维护。例如:

    (2)为xx定义动画的样式


更多的话,会及时更新~

```html
{{ message | filterA('arg1', arg2) }}
```

(7)v-repeat

```html
<div v-bind:class="classObject"></div>
<script>
new Vue({
data: {
classObject: {
active: true,
'text-danger': false
}
}
})
</script>
```

(6)v-on

全局过滤器:

              template: '#template', // 模板对应的id

当使用 DOM 作为模版时(例如,将 `el` 选项挂载到一个已存在的元素上),
你会受到 HTML 的一些限制,
因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。
尤其像这些元素 `<ul>` , `<ol>`, `<table>` , `<select>` 限制了能被它包裹的元素,
`<option>` 只能出现在其它元素内部。

需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线,并将短横线后的第一个字母改为大写的

  • 作用:为视图交互提供行为函数
  • 可以在行为函数中通过 `this` 访问 data 中的数据成员
  • 注意:methods 中的行为函数不要写箭头函数
    * 因为这样会改变内部 this 的指向

           <input type="text" v-model="message">

对于这两种原因,正确的方式是:

a)   filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表

```html
<a v-bind:href="url"></a>
```

 

### 缩写

       默认是单向绑定,当父组件的属性改变时,将传给父组件,反之不会,这是为了防止子组件五一修改父组件的状态,这样的话,会让应用的数据难以理解,不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。

  • $data
    * Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
  • $el
    * Vue 实例使用的根 DOM 元素

法一:

 

(6)v-on

### 过滤器

<button class="btn" :class="[btnType]">

注意两点:

       this.books.$remove(book);

```html
<body>
<div id="app">
<child-a></child-a>
<child-b></child-b>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const bus = new Vue()
Vue.component('child-a', {
template: `
<div>
<p>组件 child A</p>
<button @click="emitDataToB">发射数据到</button>
</div>
`,
methods: {
emitDataToB() {
// 在组件 A 中通过 $emit 发射 data 事件,组件 B 中的钩子监听了 data 事件
bus.$emit('data', '组件a传递过来的数据')
}
}
})
Vue.component('child-b', {
template: `
<div>
<p>组件 child B</p>
<p>{{ message }}</p>
</div>
`,
created() {
const vm = this
// 在组件 B 的钩子中通过 bud 的 $on 监听事件
bus.$on('data', function (data) {
vm.message = data
})
},
data() {
return {
message: 'hello child b'
}
}
})
new Vue({
el: '#app',
data: {},
})
</script>
</body>
```

比如:

比如:

  1. 将所有 `{{}}` 通过 `v-text` 替换
  2. 使用 `v-cloak` 解决

           </span>

- Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化

26、动画过渡

父组件可以在使用子组件的地方直接使用 `v-on` 监听子组件发射的事件。
注意:不能使用 `$on` 侦听子组件抛出的事件,而必须在模板里直接使用 `v-on` 绑定。

           <custom name="赞"></custom>

  1. `<app>` 组件不知道它的挂载点会有什么内容。挂载点的内容是由 `<app>` 的父组件决定的
  2. `<app>` 组件很可能有它自己的模板

《2》v-on绑定enter按键可以使用:(注意:这里的13就是.enter)[这里有错,具体错误看响应式指令.html  只有点击了按钮之后才能使用enter按键]

**应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用:**

                  }

`type` 也可以是一个自定义构造器函数(例如 Person),
Vue 会使用 `instanceof` 对数据进行检测。

                         }


              el: '#app'

```html
<div v-bind:id="dynamicId"></div>
```

           <custom name="踩"></custom>

在本示例中,子组件已经和它外部完全解耦了。
它所做的只是报告自己的内部事件,至于父组件是否关心则与它无关。

17、父组件向子组件传值

也可以直接绑定数据里的一个对象:

              },

```bash
npm start
```

15、              数据的处理方法

第一,在要渲染处理的 DOM 节点上添加一个指令 `v-cloak`:

(2)     给一个标签填值:{{ vueText }}

```html
<form v-on:submit.prevent="onSubmit"></form>
<input type="text" v-on:keyup.enter="addTodo">
```

                         }

```json
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "browser-sync start --server --directory --files "code/*.html""
}
```

                  username: ""

创建一个 `package.josn` 文件:

比如:props: ["myMessages"],

#### 基础例子:反转字符串

               this.isShow = msg; // messages改变自动修改html内容

#### 组件的 `data` 必须是函数

(3)链式

```html
<body>
<div id="app">
<select v-model="currentView">
<option value="home">home</option>
<option value="posts">posts</option>
<option value="archive">archive</option>
</select>
<component v-bind:is="currentView"></component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
currentView: 'home'
},
components: {
home: {
template: '<div>home</div>',
},
posts: {
template: '<div>posts</div>',
},
archive: {
template: '<div>archive</div>',
}
}
})
</script>
</body>
```

18、子组件向父组件传值

为什么我们会有修改 prop 中数据的冲动呢?

       events: {

## Vue 实例

13、观察

  • 如果是多个单词组成的名字
  • 建议使用短横杠的方式
  • 如果使用的是驼峰命名
  • 则在 DOM 模板中必须将 驼峰命名的组件名改为短横杠的方式
  • 在 字符串模板中,无论是驼峰还是短横杠都行

(4)v-text

#### 数组语法

(3)computed: {

过滤器是 JavaScript 函数,因此可以接受参数:

});

然后我们可以这样向它传入一个普通字符串:

       比如:

在 package.json 文件中加入以下内容:

           }

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
```

(4)     js中给Vue组件化处理

<!-- v-bind:style 的数组语法可以将多个样式对象应用到一个元素上 -->
<div v-bind:style="[baseStyles, overridingStyles]">
```

比如:

Vue.js 都提供了完全的 JavaScript 表达式支持:

比如:v-for="book in books |filterBy '水' in 'name' | orderBy sortParam

登陆注册示例:

});

#### 组件的 template

    </script>

![img/props-events.png](img/props-events.png)

    </div>

过滤器可以串联:

              data: {

#### 在 DOM 模板中使用组件注意事项

      <mydialog :my-messages="dialogmsg"></mydialog>


                  clickListener: function() {

#### v-bind 缩写

});

## 计算属性

                  })

 

比如:

简单示例

(3)computed: {

  • 使用自定义事件的表单输入组件
  • 非父子组件通信

在html中,事件的方法用@click=”clickListener”

  1. 定义一个计算属性,处理 prop 的值并返回

 -->        data:{classObj:{'class-a':true, 'class-b':false}

              template: '#template',

    (2)为xx定义动画的样式

                     count: 0

               type: String,

                     count: 0

                             if (this.points <= 200) {

(8)v-with

两者的区别是:如果放在里面的不用加$,如果是把对象提出来的话,那就要加上$,其他的对象名也是如此。

(2)var vm = new Vue();

    插值,只会影响单次的改变,之后的改变不再发生变化,比如:

           new Vue({

              data: {

<button class="btn" :class="[btnType]">

(4)     js中给Vue组件化处理

a)   filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表

显示:

    自动将用户的输入转为number类型。

               {{ $data.message}}

new Vue({

  }

<div>{{messageStr.split(",").reverse().join("|")}}</div>

(2)var vm = new Vue();

new Vue({

    });

                         points: 300,

              return `el-alert--${this.type}1`;//这里使用反单引号

         (1)父组件:<input v-model="dialogmsg" type="text" />

new Vue({

比如:

        </button>

    分发,是当某子组件不知道它的挂载点的内容是什么的时候,并且挂载点的内容有它的父组件决定的,可以使用slot元素来作为原始内容的插槽。

19、过滤(/排序)

                      el: '#app',

           </div>

new Vue({

    (2)number

<div v-show="vShow">我是通过v-show来决定显不显示的</div>

              }

26、动画过渡

       <script>

    (1)<div :class="[typeClass]" >

(2)     给一个标签填值:{{ vueText }}

22、$watch

    可以让一个子组件直接当前页面写click的监听事件,其他事件也是如此

    (1)<div :class="[typeClass]" >

注意: Vue.component 要放在new Vue()之前,不然会有警告

比如:

                     computed: {

v-bind可以缩写为:

});

    (2)在父组件的js中,创建实例时 `events`,监听事件

子组件:

        });

         (2)然后给子组件容器一个自定义的:my-messages名称

<div id="app">

       《2》v-on绑定enter按键可以使用:(注意:这里的13就是.enter)[这里有错,具体错误看 响应式指令.html  只有点击了按钮之后才能使用enter按键]   

               data: {

              }

        });

13、              观察

              }

    分发,是当某子组件不知道它的挂载点的内容是什么的时候,并且挂载点的内容有它的父组件决定的,可以使用slot元素来作为原始内容的插槽。

(2)     在js中:给data传值

使用方法 :

在js中,方法具体执行用:

<div id="app">

        });

                     },

                                return '普通会员'

           });

       },

注意:当要传入event时,可以使用$event

                             if (this.points <= 200) {

           <input type="text" v-model="message">

(4)子组件的template可以直接使用{{myMessages}}

<div id="app">

4、  Vue组件化一

(2)v-style

               default: 'info'

                            return 'VIP会员'

  el: '#box'

    在同步输入框与值的input里面,添加一个lazy特性,将其改动到change事件中同步。

                                return '普通会员'

        @:click="say('hello!', $event)

(1)<custom>中声明name属性,其中custom和name都是可以自定义的,但是属性要注意,全是小写字母才可以

              el: “#id”

比如:

              methods: {

24、参数特性

 

10、              $remove

       });

        @keyup.13 = "bindEnter"

法二:

    自动将用户的输入转为number类型。

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

new Vue({

<input v-model="msg" debounce="500">

(3)链式

new Vue({

    过滤可以是链式调用过滤器,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。

注意:当要传入event时,可以使用$event

              el: “#id”

           }

    比如:

Vue.component('custom', {

    (1)v-if

<a :href="url"></a>

              <span>123</span>

比如:

比如:

       <script type="text/javascript" src="js/vue.js" ></script>

(1)当传来的数据是:messageStr: "第一个,第二个,第三个",

(1)new Vue({

<input type="text" v-model="message">

5、  Vue组件化二

(1)v-attr

这是vue为数组扩展的删除的方法

              el: '#app'

           <span>

比如:

        });

<input v-model="age" number>

                     count: 0

              data: function() {

4、  Vue组件化一

                     computed: {

});

       <template id="template">

                  return {

(3) *数组语法:v-bind:class='[classA, classB]'                       

 

1、  Vue 指定id

一个页面中要给要使用Vue的地方指定一个id,把他赋值给el。

比如:

(1)     给输入框v-model=”vueText”

        @:click="say('hello!', $event)

    实例创建的初始化步骤,建立数据观察

           <button @click="count += 1">{{count}}</button>

var Tree = Vue.extend({

            <div v-text="vText">

14、响应式指令

 

                   设置之后,不管里面含有什么内容,里面的东西都会被替换掉

 

// 开始渲染

    (1)v-if

        delBook:function(book){

 -->        data:{classA:'class-a', classB:'class-b'}

    (2)props: {

      通过true和false来控制元素是否显示

           <span>{{*message}}</span>

      需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线,并将短横线后的第一个字母改为大写的

           }

    在同步输入框与值的input里面,添加一个lazy特性,将其改动到change事件中同步。

       <template id="template">

  el: '#box'

       console.info(newVal, "|",oldVal)

    data: {

                  username: ""

                  return {

(2)orderBy

24、参数特性

3、  Vue事件

(1)v-attr

               type: String,

                     }

用法:v-for='item in items'    
           v-for='(index, item) in items'    *数组则是索引,遍历对象则是键

             },  

       比如:

  }

2、  Vue给值和内容

                         level: function() {

在html中,事件的方法用@click=”clickListener”

new Vue({

<button v-on:click="btnClick"></button>

               el: "#vueForm",

    </script>

(3)v-class

              el: "#app", //选定id

(1)当传来的数据是:messageStr: "第一个,第二个,第三个",

                     },

15、数据的处理方法

               this.isShow = msg; // messages改变自动修改html内容

    vm.$watch("message", function(newVal, oldVal) {

<input v-model="msg"debounce="500">

           type: {

var Tree = Vue.extend({

(1)<custom>中声明name属性,其中custom和name都是可以自定义的,但是属性要注意,全是小写字母才可以

Vue.component('tree', Tree);

                       -->        data:{isA:true, isB:false}
(2)*对象语法:v-bind:class="classObj"                               

                     data: {

        <cc-button type="primary">主要按钮</cc-button>

在js中,方法具体执行用:

           })

    (1)lazy

           'isShow': function(msg) { // 监听到 child-msg事件

       this.books.$remove(book);

 -->        data:{classA:'class-a', classB:'class-b'}

           new Vue({

使用方法: 直接在new Vue里面添加对象:computed

           }

                     }

(1)     给输入框v-model=”vueText”

                            }

    (1)可以使用<transition name=”xx”>

                     count: 0

v-on:可以缩写为@

    vm.$watch("message", function(newVal, oldVal) {

20、{{*message}}

                     data: {

法二:

8、  指令缩写

1、  Vue 指定id

 

              el: '#app'

7、  Vue循环

16、Class与Style绑定

比较语法:

              data: function() {

       比如:this.$dispatch("isShow", false);

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg"lazy>

                  }

  template: '<div>This is a tree!</div>'

 

(4)v-text

       <2>离开和进入的样式

           <span>{{*message}}</span>

           <h1>{{name}}</h1>

         《1》阻止冒泡和默认行为:<a @click.stop.prevent='doThis' />

        }

               {{ $data.message}}

                   (3)js中创建Vue

    (4)组件动态

(1)     给输入框v-model=”vueText”

5、  Vue组件化二

                  })

Vue.directive('demo', {

  bind: function () {

    // 准备工作

    // 例如,添加事件处理器或只需要运行一次的高耗任务

  },

  update: function (newValue, oldValue) {

    // 值更新时的工作

    // 也会以初始值为参数调用一次

  },

  unbind: function () {

    // 清理工作

    // 例如,删除 bind() 添加的事件监听器

  }

})

       <1>原本默认的样式

 -->        data:{classObj:{'class-a':true, 'class-b':false}

比如:

                   (2)定义一个模板<template>,用来设置刚才定义的<custom>

// 定义

      比如:props: ["myMessages"],

Vue.directive('demo', {

  bind: function () {

    // 准备工作

    // 例如,添加事件处理器或只需要运行一次的高耗任务

  },

  update: function (newValue, oldValue) {

    // 值更新时的工作

    // 也会以初始值为参数调用一次

  },

  unbind: function () {

    // 清理工作

    // 例如,删除 bind() 添加的事件监听器

  }

})

    (2)number

           Vue.component('custom', {

(1)*变量语法:v-bind:class="{'class-a':isA, 'class-b':isB}"      

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

           xx-enter,xx-leave{}

b)   filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表

           </div>

new Vue({

       </div>

Vue.directive()

     设置之后,不管里面含有什么内容,里面的东西都会被替换掉

    data: {

       el: "#app", //选定id

比如:

(1)new Vue({

         (2)然后给子组件容器一个自定义的:my-messages名称

比如:

    });

           xx-enter,xx-leave{}

<input type="text" v-model="message">

<a v-bind:href="url"></a>

           typeClass() {

               }

           <slot></slot>

                            @keyup.13 = "bindEnter"

           <h1>{{name}}</h1>

    (2)props: {

b)   filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表

// 开始渲染

 

3、  Vue事件

                      el: '#app',

       </div>

                  }

                  return {

     (3)在子组件的js中:

(2)v-style

                     alert(this.username);

    (3)debounce

        } 

25、prop绑定类型

7、  Vue循环

              props: ['name'], // <custom>对应的属性

(2)     在js中:给data传值

           'isShow': function(msg) { // 监听到 child-msg事件

6、  Vue组件化三

有两种使用方法:

           Vue.component('custom', {

20、{{*message}}

11、 v-if和v-else

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:Vue和微信小程序的区别,vue父子组件间传值

关键词: