Vue.js框架的便利与属性介绍 (DAY25)
-
Vue框架增加和改变了一些功能，使得开发者撰写Code时简洁许多，错误率降低，在除错时也比较有效率!下面举了一个简单的例子:
在Javascript中我们要改变一个动元素的内容时会使用document.getElementById(‘动元素id’).textcontent，但这样的方法其实有时候是不太有效率的!若有很多同样的文字内容，就必须重复写很长的code，或是利用for回圈，若要多个文字连动更新，就会很麻烦!
假如我有很多同样的内容要放到各个不同的地方，就会像以下的写法:
<body>
<h1 id="1"></h1>
<h2 id="2"></h2>
<h3 id="3"></h3>
<h3 id="4"></h3>
<h5 id="5"></h5>
</body>
<script>
document.getElementById("1").textContent = "This is your project2";
document.getElementById("2").textContent = "This is your project2";
document.getElementById("3").textContent = "This is your project2";
document.getElementById("4").textContent = "This is your project2";
document.getElementById("5").textContent = "This is your project2";
</script>
像这样通常我们称为指令式渲染，直接的操作DOM物件，必须有一个指令才会有一个动作，而我们熟悉的JS和JQuery就是利用这种方法控制网页画面。
上述的这种方法在处理少量的元素时是OK的，但如果我们有更多更多同样的内容呢?这样感觉就不是很方便，所以我们换用Vue来写写看会变怎样!
<div id="hi">
<h1>{{message}}</h1>
<h2>{{message}}</h2>
<h3>{{message}}</h3>
<h3>{{message}}</h3>
<h5>{{message}}</h5>
</div>
<script>
var hi = new vue({
el: '#hi',
data: {
message: "This is your project2"
}
});
</script>
用Vue的写法看起来简洁很多，只要把定义好的内容包装起来，就可以供应拥有权限的HTML区块重复的使用，不需要对DOM重复的操作!这也就在第一篇介绍到声明式渲染。
-
认识Vue实体属性
-
Vue实体是什麽? 在
<script>标签内的程序码 - Vue有非常非常多的属性供我们使用，例如(el、data、method、computed 之类的)，但今天这篇文章会先介绍建构一个vue最基础也最常使用到的el & data & method 三个属性
el(element): 将vue功能挂载至特定范围
data:资料绑定，在特定范围呈现文字、资料等
method:用於定义vue实体上的函数
<div id="app">
<p> {{project3()}} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
x: "this i", y: "s your project 3"
},
methods: {
project3: function () {
return this.x + this.y;
}
}
})
</script>
上面这个范例将el&data&method都呈现出来，在vue实体中的el:#app属性会绑定Html模板id为app的区块，也就是说只有在绑定的区块中才能接收到vue实体的资料。在data里面的定义的x、y资料，到了methods里面，就可以透过 this.x 以及 this.y 来存取它们，这样我们在html模板中就能使用{{ }}来接收data和method函数中的资料了。
结语
第二篇就先介绍到这边，下一篇将会介绍vue的几个重要指令(Directives)!
<<: 【在 iOS 开发路上的大小事－Day26】透过 Firebase 来管理资料 (Realtime Database 篇) Part２
Thunkable学习笔记 9 - 资产盘点(二)
对thunkable的data sources还不是很清楚, 建立这个app练习并测试这个物件的特性...
Flask 防止 injection
在写好flask 服务之後，可能会将服务给弱点分析软件进行扫描， 之後会显示出一些高风险的漏洞， 而...
登录档是什麽~资工的讲古时间
今天是第二天~~~~ 正如前面规划的，今天要从我们的第一个主题Windows登录档开始介绍 这里有个...
[Re:PixiJS - Day43] pixi-particles 粒子效果 1/2：plugin 安装与开始使用
来到这次系列最後想讲的主体：粒子效果 PixiJS 实现粒子效果有两种方式： ParticleCon...
为何与如何创业？
为什麽要创业？ 创业的过程中往往会自我怀疑，为什麽自己要创业？自己凭什麽成功等等 其实在做目前项目...