vue.js-vue入门教程教你如何html中使用vue（30分钟快速入门）
前后端分离、微服务框架是当下比较流行的词汇，而vue就是前端框架的佼佼者。下面重点介绍一下vue的用法:
vue起步：1、引包 2、启动new Vue({el:目的地，template：模板内容}) 其中options参数除了 el、template还有数据data
在html中如何使用vue：
按照上述步骤， 引包 <script src='./node_modules/vue/dist/vue.js'></script>
new Vue对象 <script>
new Vue({
el:"#app",//预留填坑位置，比如html页面有一个<div id='app'></div>的元素
tempate:"<div>你好</div>"
})
</script>
完成上述后，访问该html页面可以看到你好内容。 data:动态数据的声明 用法如下:添加data
<script>
new Vue({
el:"#app",//预留填坑位置，比如html页面有一个<div id='app'></div>的元素
template:"<div>你好 {{text}}</div>"，
data:function(){
return {
//代表要在template使用的数据，所以在template中将text变量添加进去,用{{}}包裹
text:'hellow word'
}
}
})
</script>
保存之后，访问html页面，可看到内容 你好 hellow word
vue文件介绍
1、插值表达式：格式{{表达式}}
支持字符串{{''}}、对象{{object.key}}、判断后的布尔值{{true}}、三元表达式{{a==b?'正确':'错误'}}
注：必须在data这个函数返回对象中声明
2、常用指令
v-text其实就是给元素的innerText属性赋值，只能用在双标签中
v-html就是给元素的innerHTml赋值、
v-if\v-if-else\v-else、
v-show隐藏元素，就是将display：none
v-bind给元素属性赋值，语法：<div v-bind:属性名='变量'></div>， 简写 <div :属性名='变量'></div>
v-on 处理原生事件的 。用法：在元素上v-on:原生事件名=“操作方法” ， 简写：@原生事件名=“操作方法”
v-model 双向数据流绑定，即页面改变影响内存，内存数据改变影响页面。
v-model与v-bind区别：
1、v-bind的是单向的，只能将vue中的数据同步到页面。
2、v-model 双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。例子：<input v-model='myValue'></input> <button v-show='myValue=='xxx'>按钮</button>,new vue中默认myValue='hellow'，如果刷新html页面，这时候input的默认值是hellow，说明vue的属性值成功同步到页面，当输入xxx时，按钮能够显现，说明用户输入的值能够赋值给vue的属性，所以是双向绑定。
3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。
v-for的用法
基本用法v-for="item in array"
对象用法v-for="item in object"
v-for 中的属性 数组 item index ，对象 item 、key、index
3、组件的用法
在new Value中使用components声明要用的组件,key是组件值，value是组件对象
<script>
var APP = {template:"<h>我是入口组件</h>"} -----------生出子
new Vue({
el:"#app",
template:"<app/>"，//组件调用 ---------------使用子
components:{app:APP} ---------------------声明子
})
</script>
//访问页面后，可以看到我是入口组件 这个显示内容，说明组件调用成功。 口诀： 生出子、 声明子、使用子
使用组件以单标签（<app/>）使用，只能在new Vue中可以，如果在其他地方请使用双标签,比如将上述例子中的APP组件再调用其他组件时，必须用双标签如下
var myHeader ={template:<h>我是头</h>"}
var myBody ={template:<h>我是主要内容</h>"}
var APP = {
components:{'my-header':myHeader ,'my-body':myBody } ，
template:"<div>
<my-header></my-header> -----------在这使用时，必须双标签，而不能是<my-header/>
<my-body></my-body>
</div>"
}
//访问页面可以看到 我是头 我是主要内容的显示，说明调用成功。
组件之间传递数据
父向子传递数据 其实就是给子使用v-bind绑定数据
var APP = {
components:{'my-header':myHeader } ，
template:"<div>
<my-header :title='title' ></my-header> -----------v-bind绑定数据
</div>",
data:function(){
return {
title:'测试'
}
}
｝
子组件的修改如下： 利用props接收父组件传递过来的参数
var myHeader ={
template:<h>我是头 {{title}}</h>",
props:['title']
}
//访问页面可以看到 “我石头 测试”内容显示
简单介绍一下vue的最基本用法，后期会继续完善文章。本人使用vue\mpvup+vant等组件开发的项目作为例子，有兴趣的可以下载学习。源代码已上传git：Git地址
技术交流群： ①群：699050440 ②群：824313640
