Vue基本用法

Vue:渐进式javascript框架
声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:
1插值表达式
存在闪动问题:快速刷新浏览器时,有时会显示{{xxx}}内容,然后替换为要显示的值解决的办法-->指令(先隐藏,替换好值之后再显示)
2指令(指令的本身就是自定义属性)
以v-开头 例如v-cloak
html:

js

效果:

使用v-cloak
html:

css:

效果:

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2MVVM私享
M(model)
V(view)
VM(view-model)

mvc,mvp和mvvm的区别:
>

javaScript 框架

简化Dom的 *** 作

响应式数据驱动

简单的vue程序：

1导入开发版本的vueis

2创建vue实例对象，设置el属性和data属性

3使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1内容中有html结构会被解析成标签 2设置元素的innerHTML)

注：解析文本使用 v-text 解析hml使用v-html

v-on(1为元素绑定事件，2事件名不需要写on,3指令可以简写@ 4绑定的方法定义在methods属性中5方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1根据元素的真假切换元素的显示状态 2原理是修改元素的display实现元素的隐藏)

v-if(1根据表达式的真假切换元素的显示状态 2本质是 *** 作dom 3表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的 *** 作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1为元素绑定属性 2完整写法v-bind:属性名 3简写的话可以只写:属性名)

切换（1用数组来存放元素 2用v-on来绑定事件 3用v-bing来修改元素的属性）

v-for(1根据数据生成列表 2v-for长和)

v-on (补充)（1时间绑定的方法写成函数调用的形式，可以传入自定义参数

2定义方法时定义形参数来接受传入的实参

3通过修饰符可以对事件进行限制）

例如：@keyupenter

v-model(1便捷的设置和获取表单元素的值

2绑定的数据会和表单元素值相关联

3 表单的 数据=绑定的数据)

记事本实战演练(1增加 2删除 3隐藏 4清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

前言：Vue服务器采用nginx➕Vue为服务器；

请确保你是以拥有 sudo 权限的用户来登录的服务器
请按照下面的步骤，在 CentOS 中安装 Nginx。

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

启动 Nginx：
sudo systemctl start nginx
通过运行以下命令，来检查 Nginx 的运行状态：
sudo systemctl status nginx
然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

通过下面的命令来打开这两个端口：

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

你可以像管理其他服务那样管理 Nginx。

启动 Nginx
sudo systemctl start nginx

停止 Nginx
sudo systemctl stop nginx

重启 Nginx
sudo systemctl restart nginx

修改 Nginx 配置后，重新加载
sudo systemctl reload nginx

设置开机启动 Nginx
sudo systemctl enable nginx

关闭开机启动 Nginx
sudo systemctl disable nginx

本文引用： # 2019 年如何在 CentOS 7 上安装最新版 Nginx
注意：有可能会出现403 Forbidden，执行 setenforce 0 设置SELinux 成为permissive模式

---