-
(1):父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
(2):子组件通过$emit向父组件抛出触发事件名称(delete)和触发事件的list索引值。
(3):父组件通过监听对应事件名称(@delete)触发函数handleDelete。函数通过子组件抛出的索引值对应删除list父子组件之间的交互:
父组件向子组件传递数据:通过属性
子组件向父组件传递数据:通过发布订阅模式
查看全部 -
v-html 会被转义 v-text 不会;{{}} 插值表达式,vue不面向DOM编程,面向数据。
查看全部 -
这个课程的代码我已经打包在 https://github.com/1171843306/Vue.js
大家可以去那里下载或者观看查看全部 -
<div id="app">
<p>{{ message }}</p>
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<div id="app-3">
<p v-if='seen'>
xianzaikandaowola
</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="clickevent">点击</button>
</div>
<div id="app-6">
<p> {{message}}</p>
<input type="text" v-model='massage' >
</div>
<div id="app-7">
<h1 v-text='number' v-on:click="clickIt"> <h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello js!'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
/* seen:false */
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: "no1" },
{ text: "no2" },
{ text: "no3" }
]
}
})
/* 添加新内容 */
app4.todos.push({ text: "no4" }, { text: "no5" })
var app5 = new Vue({
el: '#app-5',
data: {
message: 'hello'
},
methods: {
clickevent: function() {
this.message='第五:'+this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: "#app-6",
data: {
message: '第六:'+'hi'
}
})
//替换
var app7=new Vue({
el:"#app-7",
data:{
number:'第七:'+12345
},
methods:{
clickIt:function(){
this.number='第七:'+112
}
}
})
</script>
查看全部 -
新建Vue实例:
new Vue({ el:'#root', template:'<h1>hello {{msg}}</h1>', data:{ msg:"world" } })
这里面的el叫做挂载点,它规定了vue实例挂载在哪一个html元素上,挂载点外的元素不可使用vue语句
template叫做模版,可以把已经挂载了Vue实例的html元素内的结构直接放到这里面,这和在html元素里编写时一样的;
data中存放的就是被挂载的html元素内所有需要的数据,可以使用{{双大括号}}来做插值。
查看全部 -
v-on:click = @click
v-bind:title = :title
查看全部 -
计算属性与侦听器:
<div id="root">
姓:<input v-model="firstName">//v-model双向数据绑定
名:<input v-model="lastName">//v-model双向数据绑定
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
实例:
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性,只有数据发生变化才会重新计算,未发生变化用之前计算结果的缓存值来展示
fullName:function(){
return this.firstName+' '+this.lastName
}
},
watch:{//侦听器,侦听数据是否发生变化
fullName:function(){
this.count++
}
}
})
查看全部 -
在之前使用new Vue定义一个Vue实例(组件)时,数据存放在data对象里,代码如下:
new Vue({ el: '#app', data: { msg: 'hello vue' } })
但使用vue-cli时,存放数据的data属性不再是对象了,而是一个函数,函数的返回值是一个对象。
export default { data: function() { return { msg: 'hello vue' } } }
使用ES6语法简化为:
export default { // data () {} 表示data是一个函数 data () { return { msg: 'hello vue' } } }
查看全部 -
<template>...</template>标签内部只允许有一个根标签(如div),即所有的标签要包裹在一个根标签内,代码如下:
<template> <div> <div>...</div> <ul>...</ul> ... </div> </template>
查看全部 -
子组件向外部进行一个发布(触发事件),那么父组件在模板里创建子组件的时候,同时可以监听子组件触发的事件
查看全部 -
父/子组件如何通信:
父组件向子组件传值是通过在组件上绑定属性的方式,如:content、:index这两个属性
子组件向父组件传值是通过发布-订阅模式,子组件通过this.$emit('事件', '值')方法触发事件传递值,父组件监听对应事件可以获取到传递过来的值
查看全部 -
每一个Vue组件都是一个Vue实例,也可以说每一个Vue实例都是一个Vue组件。对于代码中的new Vue(...)这个大的Vue实例来说,它里面如果没有定义template属性的话,那就会把挂载点标签(<div id="app">...</div>)中的所有DOM标签当做template(模板)。
查看全部 -
使用Vue.component()方法来定义Vue的组件。
每一个Vue的组件都是一个Vue的实例,一个Vue项目就是由很多Vue的实例组成。
既然每一个Vue的组件都是一个Vue的实例,那么在定义组件时也可以有data、template、methods等属性
查看全部 -
概念:Vue实例、挂载点、模板、组件
Vue实例:new Vue({...})
挂载点:<div id="app">...</div>
模板:挂载点内的代码
组件:Vue.component(...)
查看全部
举报