我们今天这里讲的是 直接在原来的项目中引入 vue.js文件,并创建一个vue的示例,简单讲讲vue在原有html页面中的应用
(一)使用官网的 cdn引入 (二)使用hbuilder X 在使用hbuilder X新建项目时可以选 vue项目(普通模式)
项目路径和基础页面如图
官方文档 地址
步骤 1、在页面 body 创建一个 div 盒子 绑定一个 id 2、创建一个vue 实例 这里的 new Vue (V要大写
<!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"> {{msg}} </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { msg: "hello world!!!" } }) </script> </body> </html>参数说明 el: 挂载需要vue实例的页面 DOM元素 官方文档介绍 这里一般用id
data: 存放你所需要的数据 官方文档介绍 这里有两种基本使用方法
data: { msg: "hello world!!!" } data() { return{ msg: "hello world!!!" } }