Vue 2.5从零开始学习 — 初探
Vue 入门
曾经我一直是一个十分看不起前端技术的无脑小白，觉得前端技术无非就是操作操作DOM，排排版做做页面设计，但是随着时代的进步，当下技术的发展，一向喜欢贴近用户操作，想要增强用户使用体验的我逐渐发现其实和用户交互最多的是前端的逻辑，而由于用户需求的不断增长，前端的交互也变得越来越复杂。
当我听说了关于前端框架的前沿技术时，接触到了尤雨溪大神的一些视频，可能对他有一种人格上的崇拜吧，就像当初喜欢翁恺老师一样，Vue也给我留下了很好的第一印象，那就让我们一起来学习吧！
My First Vue Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<titile> Vue 入门 </titile>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>
hello {{msg}}
</h1>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "world"
}
})
</script>
</body>
</html>
Code Explain : What are those tags?
在 JS 脚本中新建一个 Vue 对象，而 el 指明了 Vue 对象的挂载点。
Vue 对象必须挂载到一个 html 元素上进而实现各种数据绑定和函数操作。
data 则是这个 Vue 对象的数据包，以 key-value 的形式存储数据。
存下来的数据自然是要用的，那么怎么用呢？在该 Vue 对象的挂载点 #root 的 div 元素中，可以看到使用了语法 {{ ... }} ，这样就按照 key 可以取出 data 中数据了，并且一旦更改 Vue 对象中的 msg 的值，html元素中也会相应跟着变化。
OKOK，如果晓得这个 Vue 挂载到了 #root 元素上，那么我们就可以把这个元素叫做 “ 模板 ”了。
同样，模板的内容也可以由 Vue 指定，只需类比 data: ... ，写上 template: '...( 模板内容 )' 即可。
在 HTML 文档模板内容中，{{ ... }} 这样的语法被称为 插值表达式，当然我们还可以选择使用 Vue 的指令：
指令 (Directives) 是带有 v- 前缀的特殊属性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM ( From Vue 官方文档 )
<div id="root">
<div v-text="msg"></div>
</div>
另外区别于 v-text ，我们还有 v-html，当你想要以 html 形式显示内容时，使用 v-html 能够转义数据的文本内容。
Data Oriented rather than DOM Oriented :
曾几何时，学习 jQuery 的时候，如果我们要改变元素的内容，必须去操作 DOM， 这虽然直观清晰，但是写起代码来会非常麻烦，所以在 Vue 中，我们是面向数据编程啦！
假设我们要设置一个点击事件，当 #root 元素被点击时，里面的 'world' 会变成 'my Vue' , 那么我们应该这么写：
<div id="root">
<div v-on:click="handleClick">
hello {{ msg }}
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "world"
}，
methods: {
handleClick: function () {
this.msg = "my Vue";
}
}
})
</script>
- 既然学过 HTML+JS ，对 onclick 一定不陌生，在 Vue 中指令的写法也相当类似，v-on:click = " ... "
- 当然我们更经常使用它的简写版：@click = " ... "
网友评论