vue基础
vue基础
vue-clivue基础概念- 什么是
vue
vue是一个渐进式的javascript框架
渐进式
框架和库
- 开发
vue
传统的开发 通过html页面引入vue
webpack工程化下开发
vue文件template
必须，提供组件的结构 html
注意：必须要一个根元素 divscript
书写js代码 逻辑style
处理样式，默认支持css
通过lang="less|scss" 可以使用less或者sass
需要安装依赖包vue-cli
因为webpack太难配置了，vue官方提供了vue-cli用于创建一个vue项目
安装
yarn global add @vue/cli- 处理化项目
vue create 项目名字
- 启动项目
yarn serve
- 目录结构：
关注点：
src文件夹下App.vue
vue基础API_上半部分- 声明式渲染
vue是一个mvvm框架
m: model 数据
v: view 视图
vm: ViewModel 视图模型 vue已经处理
双向数据绑定： v变了m会自动变 m变了，v会自动变
数据驱动思想：vue不推荐操作DOM，直接操作数据
- v-bind动态属性
v-on绑定事件
事件对象
事件修饰符
按键修饰符v-model双向绑定
修饰符v-text与v-html指令
插值表达式
用于设置元素的部分内容
内容:{{msg}}
v-text
用于设置元素的innerText
v-html
用于设置元素的innerHTML
标签可以生效，但是注意安全，，，，不要对于不可信的内容使用v-html
- v-show和v-if
控制标签隐藏出现v-for指令
基础语法
数组
v-for="item in 数组"
v-for="(item, index) in 数组"
对象
v-for="value in 对象"
v-for="(value, key) in 对象"
数字
v-for="item in 数字"
v-for="(item, index) in 数字"- 特点
双向绑定
数据驱动视图
如果数据变化了，则视图会自动跟着变
组件化开发
