原生html怎么使用vue,vue教程(一)-html使用vue

前后端分离、微服务框架是当下比较流行的词汇，而vue就是前端框架的佼佼者。下面重点介绍一下vue的用法:

在html中如何使用vue：

new Vue({

el:"#app",//预留填坑位置，比如html页面有一个

tempate:"

你好

"

})

new Vue({

el:"#app",//预留填坑位置，比如html页面有一个

template:"

你好 {{text}}

"，

data:function(){

return {

//代表要在template使用的数据，所以在template中将text变量添加进去,用{{}}包裹

text:'hellow word'

}

}

})

保存之后，访问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-on 处理原生事件的 。用法：在元素上v-on:原生事件名=“操作方法” ， 简写：@原生事件名=“操作方法”

v-model与v-bind区别：

1、v-bind的是单向的，只能将vue中的数据同步到页面。

3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

v-for的用法

基本用法v-for="item in array"

对象用法v-for="item in object"

3、组件的用法

在new Value中使用components声明要用的组件,key是组件值，value是组件对象

new Vue({

el:"#app",

components:{app:APP} ---------------------声明子

使用组件以单标签()使用，只能在new Vue中可以，如果在其他地方请使用双标签,比如将上述例子中的APP组件再调用其他组件时，必须用双标签如下

var myHeader ={template:我是头"}

var myBody ={template:我是主要内容"}

var APP = {

template:"

组件之间传递数据

var APP = {

template:"

data:function(){

return {

title:'测试'

}

}

｝

var myHeader ={

template:我是头 {{title}}",

props:['title']

}

简单介绍一下vue的最基本用法，后期会继续完善文章。本人使用vue\mpvup+vant等组件开发的项目作为例子，有兴趣的可以下载学习。源代码已上传git：Git地址