1、安装 — Vue.js vue2官网
2、安装开发者工具,并且放入浏览器的插件里,开启开发者模式
3、初始环境
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- <script src="../js/vue.js">script>
- head>
- <body>
- <script>
- Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
- script>
-
- body>
- html>
4、Hello小案例
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- <script src="../js/vue.js">script>
- head>
- <body>
-
-
-
-
-
- <div id="root">
-
- <h1>hello , {{name}}h1>
- <h1>我的年龄是 : VUEh1>
-
- div>
-
-
- <script>
- Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
-
- //创建vue实例
- new Vue({
- el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
- data: {
- //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
- name:'尚硅谷123'
-
-
-
- }
-
-
- });
-
-
- script>
-
- body>
- html>