一、Vue.js添加到项目中的几种方式
1、在页面上CDN包的形式导入
方式:<scriptsrc="https://unpkg.com/vue@next"></script>
注意: “@next” (表示使用最新版本,生产环境不建议使用),生产环境建议使用具体的版本号 例如:@3.0.3
2、使用npm安装它
方式:$npminstallvue@next
注意:在用Vue构建大型应用时推荐使用npm安装。
3、使用命令行工具(CLI)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
二、Vue是什么?
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,易于上手。
三、第一个vue程序
1、导入 开发版本包 (生产包)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、创建vue实例,设置el属性和data属性
四、本地应用
1、v-text 简写为 {{}}可以在标签里调用data中的内容
2、v-on 简写为@ 可以定义标签的点击事件
3、v-show 显示指令 通过操纵 样式display来实现 性能消耗小
4、v-if 显示指令,通过操纵dom元素 是否存在dom树中 true 就在 false就删除 来 的内容实现 性能消耗大
5、v-bind指令作用是:为元素绑定属性 完整写法v-bind属性名 ,简写:属性名
6、v-for 根据数据生成列表结构,经常和数组结合使用,表示形式(item,index) in 数据
item数组中的项,index索引
7、v-on 传递自定义参数,事件修饰符
8、v-model 获取和设置表单元素的值(双向数据绑定)
总结 : 轮播图 、小黑记事本