vue学习培训

2021-02-23 02:49| 发布者: | 查看: |

< 文档,随后根据以下方法引进 Vue:

 !-- 开发设计自然环境版本号,包括了有协助的指令行警示 -- 
 script src="npm/vue/dist/vue.js" /script 

或是:

 !-- 生产制造自然环境版本号,提升了规格和速率 -- 
 script src="npm/vue" /script 

看个简易的实例:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" / 
 title -vue /title 
 script src="js/vue.js" type="text/javascript" charset="utf-8" /script 
 /head 
 body 
 div id="app" 
 {{text}}
 /div 
 script 
 var vm=new Vue({
 el:"#app",
 data:{
 text:'文字数据信息被3D渲染到HTML中了哦!'
 /script 
 /body 
 /html 

除开文字插值,大家还能够像那样来关联原素 attribute:

 div id="app-2" 
 span v-bind:title="message" 
 电脑鼠标悬停几秒钟钟查询这里动态性关联的提醒信息内容!
 /span 
 /div 
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '网页页面载入于 ' + new Date().toLocaleString()
})

v-bind attribute 命令含有作为前缀 v-,以表明他们是 Vue 出示的独特 attribute。将会你早已猜中了,他们会在3D渲染的 DOM 上运用独特的响应式个人行为。在这里里,该命令的含意是:“将这一原素连接点的 title attribute 和 Vue 案例的 message property 维持一致”。

假如你再度开启访问器的 JavaScript 操纵台,键入 app2.message = 新信息 ,便会再一次见到这一关联了 title attribute 的 HTML 早已开展了升级。

VUE官方网实例教程:v2/guide/

vue 赞 (0)
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部