Vue ⑅：要开始Vue之前要先做的事

JavaScript 学得差不多了，觉得应该可以开始 Vue 看看了
但在 Vue 之前要先引入它 。

在引入它之前，还有几个要下载的东西：

• Vue Devtools：这个是 chrome 插件。Vue 的检査工具 。
• Vue 2 Snippets：VSCode 的插件。如果用vs扣的朋友要装这个才会动。

起手式，接招！

<!-- HTML 插入这个 CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!-- HTML -->
<div id="app">
	<input v-model="text">
	<h3>{{text}}</h3>
</div>

再来要在 JS 的地方 实体化Vue 物件，传入特定属性及方法。

// 实体化物件
new Vue({

  // 将 Vue 绑定在自订的元素上 (上面 HTML id 那边)
  el: '#app',
  
  // Vue 有双向绑定的特性！要先定义资料才能开始绑定
  data: {
    text: ''  // 这个资料名称可以自订
  },
});

↑↑　这样就可以动哩
会得到一个 input 的框框 和 还没有内容的 h3 标签。

如果在框框内输入文字，h3 内也会跟着新增文字 ⸜( ´ ꒳ ` )⸝♡︎
然後我们新增的文字 也会跟着写入物件内

J格是v-model的特性！

上面套件装完之後，可以右键 > 检査 > 上面那排选 Vue 开啓检查工具

他会长这样，
点 Root 就可以看到我们物件中内资料

（ text 内的123123 是我刚刚在 input 框框输入的数字 ）

一起动手做做看吧 ( ¯꒳¯ )ｂ✧
想练习的话 这边有超阳春练习题
　
　

延续铁人赛的JS ，想开始学习Vue
但由於本人是 100% 纯正 从 0 开始

希望这些文章可以帮助目前也在学习途中的朋友 ♪
顽张ろう！