一、书写格式上
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
鼠标悬停几秒钟查看此处动态绑定的提示信息!
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