Vue的初学准备
- 开发文档
- vue官方文档的下载地址:https://cn.vuejs.org/v2/guide
- b.npm官方文档的下载地址:https://www.kancloud.cn/shellway/npm-doc/199982
- webpack官方文档下载地址:https://doc.webpack-china.org/concepts
- 推荐浏览器
- Chrome
- 编程工具
- HBuilder X
Vue的安装和使用
- Vue的安装
在Vue.js的官网直接下载vue.min.js并用<script>
标签引入
下载地址 https://vuejs.org/js/vue.js
vue官方安装说明网址 https://cn.vuejs.org/v2/guide/installation.html - vue的使用有如下三种方式
- 打开下载链接 直接新建一个vue.js文件 把源代码复制粘贴到自己的vue.js中
- 通过cdn方式引入vue文件
Vue推荐使用的网址 https://unpkg.com/vue
staticgile CDN 国内推荐使用网址https://cdn.staticfile.org/vue/2.6.11/vue.min.js
unpkg 推荐使用的网址https://unpkg.com/vue/dist/vue.js
cdnjst推荐使用网址 https://cdnjs.clounflare.com/ajax/libs/vue/2.6.11/vue.min.js(需翻墙)
如:<script src="https://unpkg.com/vue"></script>
cdn是内容分发系统,它的主要作用是将网站的内容发布到最接近用户的网络边缘,使用户可以就近取得所需的内容,提高响应速度
3. 采用npm和webpack模块包形式引入vue.js(后面再讲)
npm是现在前端开发的主要工具。将复杂的JavaScript文件库组织成模块化的管理方式。(包的管理工具) 在使用时制定需要的模块即可
webpack将模块化编码的程序进行打包生成,从而允许在不支持es6的浏览器中运行
第一个Vue实例
<body>
<!--每个程序必有一个个也是唯一一个 带有id的最外层元素(div)-->
<div id="app">
<p>商品名:{{name}}</p>
<p>价格:{{price}}</p>
<!--使用vue中的数据 {{key}}-->
name = {{name}}
</div>
</body>
<!--1.引入vue.js文件-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="https://unpkg.com/vue" type="text/javascript" charset="utf-8"></script>-->
<!--2.创建vue实例-->
<script type="text/javascript">
//创建vue实例
var vm = new Vue({
//el绑定id为app的div元素
el:'#app',
/*
1.双向绑定的数据vm对象可以映射到model中,model改变以后会
影响vm数据
2.vm可以改变view中的数据 view中的数据优惠影响vm中的数据
3.双向绑定的数据都是键值对 key:value,
*/
data:{
//使用data属性可以向双向绑定机制中传入数据
//key:value
name:'吹风机',
price:'99元'
}
});
console.log(vm);
</script>
页面效果: