vue入门及简单命令

1.1 Vue.js介绍

1.1.1Vue.js是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.

1.1.2为什么使用Vue?

1. 声明式渲染: 前后端分离是未来趋势
2. 渐进式框架: 适用于各种业务需求
3. 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1. {{}}:差值表达式
2. el:挂载点
   1. el的作用？
   2. Vue的作用范围？
   3. el选择挂载点时，是否可以使用其他选择器？
   4. 是否可以设置其他的dom元素进行关联？

data：数据对象

• 1. Vue中用到的数据定义在data中
  2. data中可以写复杂类型
  3. 渲染复杂类型数据的时候，遵守js语法

1.2.3 声明式渲染的好处

Vue中声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML

1.2.4 Vue常用指令

根据官网的介绍，指令是带有v-前缀的特殊属性。通过指令来操作DOM元素

1. v-text指令：

作用：获取data数据，设置标签的内容。

注意：默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容。

2. v-html指令

作用：设置元素的innerHTML（可以向元素中写入新的标签）

3. v-on指令

作用：为袁术绑定事件，比如：v-on:click，可以简写为@click="方法名"

绑定的方法定义在vue实例的methods属性中。

4.v-show指令

作用：v-show指令，根据真假值，切换元素的显示状态

v-show指令总结

• 原理是修改元素的display属性，实现显示或者隐藏
• 指令后面导入内容，最终会解析为布尔值
• 值为true显示，为false则隐藏
• 数据改变之后，显示的状态会同步更新

5. v-if 指令

作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

v-if="isShow"就是根据值来删除和增加dom元素

v-if指令总结

• v-if指令的作用：根据表达式的真假切换元素的显示状态
• 本质就是通过dom元素，来切换显示状态
• 表达式为真，dom元素存在，为假从dom树种删除
• 频繁切换使用v-show，反之使用v-if

6. v-bind指令

作用：设置元素的属性（比如：src,title,class）

v-bind指令总结：

• v-bind指令的作用是：为元素绑定属性
• 完整写法v-bind:属性名:属性名

7. v-for指令

作用：根据数据生成列表结构

• 相当于java里的for循环
• v-for 指令的作用: 根据数据生成列表结构

• 数组经常和 v-for结合使用,数组有两个常用方法:
  • push() 向数组末尾添加一个或多个元素
  • shift() 把数组中的第一个元素删除

• 语法是: (item,index) in 数据
• item和index 可以结合其他指令一起使用
• 数组的长度变化,会同步更新到页面上,是响应式的

8. v-on指令的补充说明

1. 传递自定义参数 : 函数调用传参
2. 事件修饰符: 对事件触发的方式进行限制

总结

• 事件绑定方法,可以传入自定义参数
• 定义方法时,需要定义形参,来接收实际的参数
• 事件的后面跟上 .修饰符 可以对事件进行限制
• .enter 可以限制触发的按键为回车
• 事件修饰符有许多 使用时可以查询文档

1. Npm

不建议是使用cnpm

安装vue-cli (第一次使用的时候进行安装)

Vue-cli

Npm i -g vue-cli

Webpack

Npm i webpack -g

Npm i webpack-cli -g

创建项目

Vue create 项目的名字

如果出现这个   就是vue-cli 的版本和我们创建项目的版本不一致

修改一下版本

卸载原来的不符合使用的vue的版本并安装合适的版本

安载axios

命令: npm i axios

1. Tomcat  java代码

服务器  端口号  8080

Node  服务器

前端服务器  前端代码

默认端口号  8080

8081   8082

路由:

定义路由的时候  path的路径一定是唯一的

如果写name   对应的值 也得是唯一

容器 作用  存放组件   一般寻访到父组件里面

App.vue是所有组件的父类

在vue 里面 @ 代表的是src

写一个组件配置路径：

标签里面只能有一个根标签

1. 在router/index.js中配置路径

启动命令

Npm run xxx