小程序数据绑定 html,小程序和Vue关于绑定数据书写上的区别

一、书写格式上

1、绑定事件

Vue：

点击

小程序：点击

Vue是通过v-on：事件名字='回调函数名'。

小程序以bin或catch开头，后面跟着事件类型，例如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch·前还可以加上capture-来表示捕获阶段。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

2、标签中的属性及文本内容的写法

Vue:标签中的属性(HTML的特性)：“指令：属性名字=‘绑定的数据变量’ ”，v-bind：title='message'，v-bind和v-on可以分别缩写:空(省去)和@

例如： 鼠标悬停几秒钟查看此处动态绑定的提示信息！

v-bind是一条指令，表示绑定属性，还有v-once：只执行一次，v-html=“rawhtml”：显示html

完整示例：//html

鼠标悬停几秒钟查看此处动态绑定的提示信息！

//jsvar app2 = new Vue({

el: '#app-2',

data: {

message: '页面加载于 ' + new Date().toLocaleString()

}

})只有文本绑定的数据变量才用“{{数据变量}}”，其实双大括号就是将数据解释为普通文本。//html

Using mustaches: {{ rawHtml }}

Using v-html directive: 

//js

var app=new Vue({

el:'#app-7',

data:{

rawHtml:'红色'

}

})

输出：

小程序

所有的数据绑定统统用大括号包含，如果是组件中的数据绑定需要在大括号外加引号，文本不需要加引号。

{{item.name}}

3、小程序中的模板和vue中的组件

小程序

定义模板：中间很多想要的wxml，该模板也是.wxml文件

{{title}}

使用模板：只需要在文件顶部引用 

Vue中的组件

在js中定义，例如Vue.component('my-component', {

template: '

Hi

'

})

应用组件，在html中引入

4、包含if else块

Vue使用来包含，小程序使用。

和均不显示

Vue

Title

Paragraph 1

Paragraph 2

小程序获取头像昵称

{{userInfo.nickName}}

还有一个小的重要区别，vue的写法都是v-xx=“xxx”，小程序是wx:xx="xxx"

5、关于属性

在小程序中沿用HTML的属性，属性=“{{变量或js表达式}}|字符串”。如果属性值是静态的，就直接用字符串表示，如果属性值是动态变化的，那么就直接让属性=变化的js表达式或变量。

例如：//src是静态

//src动态，有变量值决定，下面显示的是一个js表达式

而Vue中，如果属性是动态变化的话，那么就需要借助v-bind指令，来帮顶属性，让属性和等号后面的变量或js表达式结合在一起//url变量打开连接//js表达式打开连接

*共同点：等号后面绑定的变量或者js表达式，均在data中初始化定义，对于js表达式，可以直接在等号后面写

作者：fenerchen

链接：https://www.jianshu.com/p/0d8723704531