-
component,props,属性传参数
查看全部 -
very good
查看全部 -
<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中是一个难点，也是一个重点
查看全部 -
Vue中的每个组件都是Vue的一个实例，也可以有data，methods方法
其实每个Vue实例也是一个组件
查看全部 -
在外层/父组件中使用属性进行值的传递，
然后在全局组件中添加props: ['content'],接收传递的属性值
Vue.component("todo-item",{
props: ['content'],
template:" <li>{{content}}</li>"
})
查看全部 -
局部组件：
需要在Vue实例中注册组件
var TodoItem = {
template: '<li>item</li>'
}
new Vue({
el: '#root',
components: {
'todo-item': TodoItem
},
data.....
})
查看全部 -
全局组件：
Vue.component("todo-item",{
template:" <li>item</li>"
})
查看全部 -
组件就是网页的某一个部分
查看全部 -
v-on 表示绑定事件
v-on:click 表示绑定了一个cilck事件
查看全部 -
v-text 输出结果为带标签的
v-html 解析标签输出标签中的内容
查看全部 -
todolist
handleSubmit : function(){
this.list.push(this.inputValue);
this.inputValue = ''
}
查看全部 -
单向绑定:数据可以决定页面的显示，而页面不能决定数据的改变
v-model可以实现数据的双向绑定
<input v-model="content" />
查看全部 -
给div绑定一个点击事件：
<div v-on:click="handleClick">{{content}}</div>其中v-on: 可以简写成@
handleClick写在Vue里边的methods方法里
现在使用vue是面向数据编程，不是面向dom编程了
查看全部 -
两个模板指令：v-text，v-html
查看全部
举报