..-CSDN博客

一、vue实例

创建根实例，所有的内容都应该包含在根实例中

new Vue({
el: '#app',
data: {//数据放这里
message: 'Hello world'
},
methods:{//方法放这里
show:function(){alert("run...")}
}
})

二、模板语法

这部分请直接去官方文档学习，我只简单提一下如何区别快速记忆一些常用的

文本：文本绑定数据的方式

<p>{{ message }}</p>

属性：html属性绑定数据的方式

<div v-bind:class="{'red': true}">
<div :href="url">//简写格式

指令：html没有的属性即是vue的指令，以v-xxx的格式:如v-for、v-if···

数据绑定：前面的可以算是单向的数据绑定，而双向数据绑定需要用到v-model指令

事件：

<a v-on:click="show"></a>

<a @click="show"></a>

三、组件

vue的核心内容便是组件，页面的每一块都可以是一个组件，这一部分需要着重理解

1.先来个小例子熟悉一下组件的基本用法

<body>
<div id="app">
<p>父组件说：{{message}}</p>

<my-component></my-component>
</div>

<template id="childComp">
<p>子组件说：{{message}}</p>
</template>
<script>
var child= {
template: '#childComp',//必须绑定一个模板
data:function(){
return {
message:"我是子组件"
}
}
}
new Vue({
el: '#app',
components: {
'my-component': child
},
data:{
message:"我是父组件"
}
})
</script>
</body>

打印结果：

代码分析：

组件必须绑定一个模板，而模板必须为template标签。其他的用法和vue实例很相似，因为vue实例本身也可以算是一个组件。需要注意的是，在使用组件时，data必须是一个函数，该函数返回data数据，如下：

data:function(){
return {
message:"我是子组件"
}
}

在这里，大家发现我在父组件和子组件中都定义了message，但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的，即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参，prop往下传，事件往上传。

2.子组件通过prop获取父组件参数

<body>
<div id="app">
<p>父组件说：{{message}}</p>

<my-component :message="fu"></my-component>
</div>

<template id="childComp">
<p>子组件说：{{message}}</p>
</template>
<script>
var child= {
//声明参数*********************
props:["fu","message"],
template: '#childComp',
data:function(){
return {
message:"我是子组件",
zi:"子组件内容"
}
}
}
new Vue({
el: '#app',
components: {
'my-component': child
},
data:{
message:"我是父组件",
fu:"父组件内容"
}
})
</script>
</body>