js vue 创建一个div_vue起步：用html+js快速构建vue

这几天刚接触vue.js，由于没有接触过es6和webpack，打算直接用html+js构建vue项目，发现虽然官方文档是html+js写的，但是不够详细，网上的例子又都是vue-cli构建的，于是简单总结分享一下这两天的成果，希望能给同样初学的小伙伴们一点帮助。

demo案例

对于官方文档上的内容我就不过多重复了，希望大家能先看一下组件以前的部分。在这里我就简单的进行一下总结，先上一个小例子(这个例子都看不懂的话还是先把官方文档仔细看一看吧)：

{{ message }}

点我

new Vue({

el: '#app',

data: {

message: 'Hello world'

},

methods:{

show:function(){alert("run...")}

}

})

运行结果：

从上面例子可以看到vue的基本使用：数据绑定，有了一个初步认识之后，让我们来看看vue的基本语法

一、vue实例

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

new Vue({

el: '#app',

data: {//数据放这里

message: 'Hello world'

},

methods:{//方法放这里

show:function(){alert("run...")}

}

})

二、模板语法

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

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

{{ message }}

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

//简写格式

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

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

事件：

三、组件

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

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

父组件说：{{message}}

子组件说：{{message}}

var child= {

template: '#childComp',//必须绑定一个模板 data:function(){

return {

message:"我是子组件"

}

}

}

new Vue({

el: '#app',

components: {

'my-component': child

},

data:{

message:"我是父组件"

}

})

打印结果：

代码分析：

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

data:function(){

return {

message:"我是子组件"

}

}

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

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

父组件说：{{message}}

子组件说：{{message}}

var child= {

//声明参数*********************

props:["fu","message"],

template: '#childComp',

data:function(){

return {

message:"我是子组件",

zi:"子组件内容"

}

}

}

new Vue({

el: '#app',

components: {

'my-component': child

},

data:{

message:"我是父组件",

fu:"父组件内容"

}

})

打印结果：

可以看到，父组件的fu传递到了子组件，并赋值给了message

3.子组件通过事件向父组件传递参数

接下来让我们再试试从父组件向子组件传递参数

父组件说：{{message}}

子组件说：{{message}}

传参

var child= {

props:["fu","message"],

template: '#childComp',

data:function(){

return {

message:"我是子组件",

zi:"子组件内容"

}

},

methods:{

send:function(){

//触发increment事件，并传递参数**************

this.$emit("increment",{mes:this.zi});

}

}

}

new Vue({

el: '#app',

components: {

'my-component': child

},

data:{

message:"我是父组件",

fu:"父组件内容"

},

methods:{

//在事件处理函数中接收参数并赋值给message*************

get:function(opt){

this.message = opt.mes;

}

}

})

打印结果：

四、路由

了解组件之后，就可以使用路由来制作一个简单的单页应用了。我们要做的是配置组件和路由映射，并指定组件渲染的位置

子组件1

子组件2

子组件说：{{message}}

var child1= {

template: '#childComp',

data:function(){

return {

message:"我是子组件1"

}

}

}

var child2= {

template: '#childComp',

data:function(){

return {

message:"我是子组件2"

}

}

}

//定义路由

var routes = [

//每个路由对应一个组件

{path:'/child1',component:child1},

{path:'/child2',component:child2}

]

var router = new VueRouter({

routes:routes

})

new Vue({

el:"#app",

router:router

});

打印结果：