1.Vue官网 https://v2.cn.vuejs.org/
注意：
开发版本 包含完整的警告和调试模式（vue.js）
生产版本 删除了警告，37.51KB min+gzip（vue.min.js）
建议开发时使用包含完整警告和调试模式的Vue的开发版本。
2.Vue.js devtools安装
在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
安装注意：在浏览器插件会看到不能启用。
打上勾可以看到。
3.开始
首先在官网下载开发版本的Vue然后本地引入，当然你也可以不下载直接引入带CDN的引入。但是考虑后期可能会更改源码，建议还是下载开发版本到本地。
<htmllang="en"><head><metacharset="UTF-8"><title>初识Vue</title><!-- 引入vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><h1>hello word!徐广超</h1></div><scripttype="text/javascript">Vue.config.productionTip=false;//阻止vue在启动时生产提示</script></body></html>
通过引用js使用Vue。
在浏览器运行后在控制台输入Vue.congig
这样就说明我们成功的引用了Vue.js框架了。
我们可以使用new Vue 将 el绑定div的root。
const x=new Vue({ el:"#root",//el用于指定当前Vue为哪个容器服务。 data:{ //data中用于存储数据，供el对应 name:'XGC' } })
整合如下：
<htmllang="en"><head><metacharset="UTF-8"><title>初识Vue</title><!-- 引入vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><divid="root"><h1>hello word!{{name}}</h1><!--插值语法--></div><scripttype="text/javascript">Vue.config.productionTip=false;//阻止vue在启动时生产提示constx=newVue({ el:"#root",//el用于指定当前Vue为哪个容器服务。data:{ //data中用于存储数据，供el所指定的容器使用name:'XGC' } }) </script></body></html>
这样就使用了Vue，将name值放到页面上，同时可以观察现象，Vue实例中的date的name改变，div的name也改变。
注意：一个Vue实例不能接管两个容器。
例如
<divclass="root"><h1>hello word!{{name}}</h1></div><divclass="root"><h1>hello word!{{name}}</h1></div><scripttype="text/javascript">Vue.config.productionTip=false;//阻止vue在启动时生产提示constx=newVue({ el:"#root",//el用于指定当前Vue为哪个容器服务。data:{ //data中用于存储数据，供el所指定的容器使用name:'XGC' } }) </script>
对应一个Vue实例，会对应失败。（只会对应第一个）
同时容器对应两个Vue实例也是不行的。
{{}}双花括号里面是js表达式与js代码。
4.总结
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
<htmllang="en"><head><metacharset="UTF-8"><title>初识Vue</title><!-- 引入vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 初识Vue：1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；3.root容器里的代码被称为【Vue模板】；4.Vue实例和容器是一一对应的；5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；注意区分：js表达式 和 js代码(语句)1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：(1). a(2). a+b(3). demo(1)(4). x === y ? 'a' : 'b'2.js代码(语句)(1). if(){}(2). for(){}--><!-- 准备好一个容器 --><divid="root"><h1>hello word!{{name}}</h1></div><scripttype="text/javascript">Vue.config.productionTip=false;//阻止vue在启动时生产提示constx=newVue({ el:"#root",//el用于指定当前Vue为哪个容器服务。data:{ //data中用于存储数据，供el供应name:'XGC' } }) </script></body></html>
