vue教程(一)-html使用vue

前后端分离、微服务框架是当下比较流行的词汇，而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地址

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　技术交流群：