Vue 框架-01- 入门篇 图文教程
Vue 官网：
关于 Vue 的基础大家可以在官网的【起步】去学习，本系列文章主要针对实例项目应用
一、Vue 的安装与使用
1.在线引用：
2.下载 js 文件（推荐）：
(1)在浏览器中打开下面链接：
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
(2)全选，拷贝，新建 js 文件，粘贴，然后倒入本地的 js 文件即可
3.使用 npm 安装（待补链接）
二、创建项目，并使用数据模板
1.开发工具使用的是 HBuilder，先创建一个 web 项目：
2.在 js 下创建 app.js，在 css 下创建 style.css，截图：
注意介绍都写在注释里了
3.index.html 文件代码：
VueLearn-cnblogs/xpwi { {name}}
4.写 app.js 代码：
//实例化 vue 对象new Vue({ //注意代码格式 //el：element 需要获取的元素，一定是 html 中的根容器元素 el:"#vue-app", data:{ name:"肖朋伟" }}); 5.截图：
三、使用方法：
1.app.js 文件：
//实例化 vue 对象new Vue({ //注意代码格式 //el：element 需要获取的元素，一定是 html 中的根容器元素 el:"#vue-app", data:{ name:"肖朋伟" }, //存储自己的方法 methods:{ welcome: function(){ alert(" welcome to learn with me!"); }, good: function(time){ alert("Good " + time + " " + this.name + "!" ) } }}); 2.html 文件：
VueLearn-cnblogs/xpwi { {welcome()}} { {good("afternoon")}}
四、属性绑定（v-bind: ）
1.app.js 文件：
//实例化 vue 对象new Vue({ //注意代码格式 //el：element 需要获取的元素，一定是 html 中的根容器元素 el:"#vue-app", data:{ name:"肖朋伟", blogUrl:"https://www.cnblogs.com/xpwi", csdnUrl:"https://blog.csdn.net/qq_40147863", /*定义 html 代码块，在 html标签中绑定获取 【特别注意】：单引号和双引号交替使用，不然都不知道怎么蹦的 */ csdnHtml:"CSDN 地址", }, //存储自己的方法 methods:{ welcome: function(){ alert(" welcome to learn with me!"); }, good: function(time){ alert("Good " + time + " " + this.name + "!" ) } }}); 2.html 文件：
VueLearn-cnblogs/xpwi
3.截图：
