html展示值 vue_vue教程(一)-html使用vue

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

vue起步：1、引包    2、启动new Vue({el:目的地，template：模板内容})  其中options参数除了 el、template还有数据data

在html中如何使用vue：

按照上述步骤， 引包   

new Vue对象 

new Vue({

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

tempate:"

你好

"

})

完成上述后，访问该html页面可以看到你好内容。 data:动态数据的声明  用法如下:添加data

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-bind给元素属性赋值，语法：

v-on 处理原生事件的 。用法：在元素上v-on:原生事件名=“操作方法” ， 简写：@原生事件名=“操作方法”

v-model 双向数据流绑定，即页面改变影响内存，内存数据改变影响页面。

v-model与v-bind区别：

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

2、v-model 双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。例子：  按钮,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是组件对象

var APP = {template:"我是入口组件"}  -----------生出子

new Vue({

el:"#app",

template:""，//组件调用   ---------------使用子

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

})

//访问页面后，可以看到我是入口组件 这个显示内容，说明组件调用成功。 口诀： 生出子、 声明子、使用子

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

var myHeader ={template:我是头"}

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

var APP = {

components:{'my-header':myHeader ,'my-body':myBody } ，

template:"

  -----------在这使用时，必须双标签，而不能是

"

}

//访问页面可以看到 我是头  我是主要内容的显示，说明调用成功。

组件之间传递数据

父向子传递数据 其实就是给子使用v-bind绑定数据

var APP = {

components:{'my-header':myHeader  } ，

template:"

  -----------v-bind绑定数据

",

data:function(){

return {

title:'测试'

}

}

｝

子组件的修改如下： 利用props接收父组件传递过来的参数

var myHeader ={

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

props:['title']

}

//访问页面可以看到 “我石头 测试”内容显示

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

技术交流群：①群：699050440     ②群：824313640