Vue基础1

niul
112 阅读4分钟

Vue第一天

Vue基础认识

单Vue文件的好处，独立作用域，不用担心重命名问题

优势：开发更快速, 更高效，企业开发都在使用

Vue是渐进式javacript框架, 一套拥有自己规则的语法

网址：cn.vuejs.org/

web里_渐进式

HTML能写网页, CSS能让网页更好看, JS赋予网页交互效果, node可以提供动态数据

Vue里_渐进式

image.png

@vue/cli和脚手架

脚手架是为了保证各施工过程顺利进行而搭设的工作平台 @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

脚手架好处

开箱即用 0配置webpack babel支持 css, less支持 开发服务器支持

脚手架的主要文件和作用

1、node_modules –都是下载的第三方包 2、public/index.html – 浏览器运行的网页 3、src/main.js – webpack打包的入口 4、src/App.vue – Vue的页面入口 5、package.json – 依赖包列表文件

@vue/cli安装

1、在系统查找里按cmd，确定

2、输入命令：npm install -g @vue/cli

3、创建好文件跟目录，在里面cmd

4、输入命令：vue create 自定义项目名（注意项目名不能有大写字母，中文和特殊符号）

5、上下箭头可以选择模板和包管理器后确定, 等待脚手架项目创建完毕即可

6、进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo
​
npm run serve        启动本地热更新开发服务器
​
# 或
yarn serve

7、看到绿色就表示成功了

@vue/cli 目录和代码分析

image.png

@vue/cli 项目架构了解

image.png

@vue/cli 自定义配置

项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js

image.png

eslint了解

image.png 处理eslint代码检查问题

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决 方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

image.png

脚手架项目_清理欢迎界面

目标: 我们开始写我们自己的代码, 无需欢迎页面

src/App.vue默认有很多内容, 可以全部删除留下框

assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

MVVM设计模式

视图和模型的双向绑定

vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率

  1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！ (思想转变)

Vue指令

插值表达式

作用：把表达式内容插入到插值所在的位置

语法：{{ 表达式 }}

变量声明在data方法的返回对象里

表达式包括：

变量、属性、三元运算符、方法调用、数字、字符串

image.png

vue指令-v-bind

作用：给标签绑定属性

语法：v-bind:属性名="Vue变量"

Vue变量声明在data方法的返回对象里

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

image.png

vue指令-v-on

目标: 给标签绑定事件

语法：@事件名="方法(参数)"

image.png

v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法：@事件名.修饰符="方法"

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

按键修饰符

.enter——回车才触发事件

.esc——按ESC才会触发

image.png

Vue指令-v-model

非数组 – 关联的是checked属性 数组 – 关联的是value属性

作用：value和vue变量双向绑定

语法：v-model="变量"

变量记得声明在data方法的返回对象里

修饰符

语法：v-model.修饰符="变量"

.number 以parseFloat转成数字类型 .trim 去除首尾空白字符 .lazy 在change时触发而非input时

v-model在表单中的使用

下拉选择——v-model写在select上面——绑定的选中的option的value

checkbox——v-model变量非数组——布尔值，checked属性

checkbox——数组——绑定的是选中项的value

radio——v-model绑定的是选中的value

textarea——绑定用户输入的value

v-for

作用：遍历列表

语法:

v-for="值变量 in 数据" v-for="(值变量, 索引变量) in 列表"

目标结构: 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

字符串——遍历每一个字符

数字——从1到当前数字

avatar
文章
阅读
粉丝