文章目录
一.如何学习VUE
- vue印象中文官方文档
培养思路,增强逻辑感,模仿他人代码 - 1.记住要:多做、多查、多问、多看
- 多做 【多做练习 ,多做项目,多做案例】
- 多查 【度娘】
- 多问 【碰见没有思路的问题,一定要,】
- 多看 【多看看别人代码,多人人家的思路】
- 2.四词真言
WWWH
- what ? 是什么?
- why ? 为什么要学
- when ? 什么时候用它
- here ? 在哪用?
二.VUE的概念
- 它是一个渐进式JavaScript 框架
- 框架:就是别人写好的东西,直接拿过来使用,包含库,包含框架
- 渐进式:允许使用其它库和框架里面的东西,渐渐的进行改变
三.MVVM(MV*)
都是通过数据来驱动视图
- 1.angular:
- angular最早用MVC
- M --model数据,v–view视图,c–control(逻辑) 特别大(往往用于大型项目开发) ,如一些国企单位
- 2.VUE:轻量,简洁
- VUE使用MVVM
- M --》model数据模型,v–》view视图模型 vm --》viewmodel控制
- 3.react 只专注于视图
四. 如何使用VUE
- 开发版本和生产版本的区别
- 开发版本:代码不压缩,有注释,内存大,多数用于开发
- 生产版本:代码压缩,没有注释,内存下,适合上线的文件
- 使用vue的三种方法
- 1.下载 npm i vue
- 2.直接下载
- 3.cdn:引入远程资源,缺点需要有网络 。网址:
https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js
- vue 初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
# 引入vue.js的文件,然后进行操作
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{
str}}</h1>
<h1>{
{
n+1}}</h1>
<h3>{
{
sum(10)}}</h3>
<h4>{
{
n>=5?'hellow world':n}}</h4>
<button v-on:click='add' >add</button>
</div>
<script>
new Vue({
el: "#app",//挂载元素,让挂在元素里面的代码 按照vue语法解析
# vue设置属性
data:{
str: "hello world",
n:1,
},
# vue方法
methods:{
sum(n){
return 10*n;
},
add(){
this.n +=1;
},
},
});
</script>
</body>
</html>
Vue的指令的操作 :v-都是代表指令
所有指令里面的值都是js
- 1.
v-text
:就是{ {变量名}}
的简写,渲染普通的文本 ==={ {}}
:插值表达式 - 2.
v-html
:渲染富文本 ,带有标签的字符串,就是富文本 - 3.
v-for
:循环 常用2个循环for…of…,for…in…v-for="(item,index) in / of 遍历的数据(可以遍历对象)" item指的是元素 item / item.属性
for ....in 拿到的是下标,for....of :拿到的是值
var arr = ["javascript", "html", "vue", "css", "node"]; for (var item of arr) { console.log(item);}//拿到的是值 for (var i of arr) { console.log(i);}//拿到的是索引下标
- 4.
多层遍历
:(找到遍历的数组) - 5.
v-if
:添加和删除元素来切换隐藏和显示- 表达式返回
true
显示 ,否则隐藏 不适用频繁的切换 - 如果后添加的元素可能不会继承之前的属性和方法
- 表达式返回
- 6.
v-show
:添加和删除元素来切换隐藏和显示- 表达式返回
true
显示 ,否则隐藏 适用于频繁切换
- 表达式返回
- 7.
v-else
:- 必须要和v-if一起使用, 必须相邻元,否则会无效
- 8.
v-on
:事件绑定- 可以简写成
@事件
,如@click
- 可以简写成
- 9.
v-bind
:属性绑定,简写:属性
- 10.
:style
:style="{key:value,key1:value1,key2:三目运算}"
- 11.
:class
:class="三目运算 返回 类名"
:class="{类名 : 表达式}" 表达式true添加 表达式false 不添加
- 如:
:class="n==i?'active':''"
,:class="{active:i==n}"
- 12.
v-model
:双向数据绑定 (核心之一)- 它是
数据<==>视图<==>数据
,都是驱动来完成的 只能用于表单元素 如input textarea select
- 用v-model来取代value
1.input v-model 代替 :value 2. <label><input id="a1" type="radio" v-model="sex" value="男" name="sex" />男 </label> <label><input id="a2" type="radio" v-model="sex" value="女" name="sex" /> 女</label> 3.input type=checkbox 替代的 checked 返回true / false 4.select v-model = "option value"
- 它是
- 13.
v-cloak
:解决闪烁问题- 如果加载vue过慢可能会产生闪烁问题,为什么?和代码的解析顺序有很大的关系
- 配和 {
{}} 使用,及css选择器
[v-cloak]{display:none}
,如<div id="app" v-cloak><h1>{ {n}}</h1></div>
- 14.
v-once
只触发一次,结合v-show
使用可以实现,v-if
不会实现效果 - 15.
v-pre
vue渲染的时候会略过此指令,不执行
回忆:filter
arr.filter((item,index)=> 返回值 ) 返回新数组 不改变原数组
返回值为true就把该元素添加到新数组里面
发回值为false 就不添加该元素
arr.splice() 改变原数组
arr.map
arr.some
arr.every
arr.find
arr.findIndex
五.json-server
-
它是一个用于模拟本地地址的一个简易服务器,说白了就是一个服务器
json文件只能使用双引号 -
如何使用:
- 1.下载 :
npm i json-server -g
- 2.在项目下创建一个data的文件夹,在里面创建一个叫db.json的文件(就是一个数据库),路径自定义
- 3.启动
cmd
,确定进入data文件夹下,输入json-server ./db.json
来启动数据库
- 4.添加是post,查询是get
- 5.补充:
- 如果端口被占用设置:
json-server ./db.json --prot 端口号
- 如何设置ip地址:
json-server ./db.json --host:ip地址
- 如何修改后并进行保存:
json-server ./db.json --watch
更改保存
- 如果端口被占用设置:
- 1.下载 :
-
添加请求简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
# 引入vue.js的文件
<script src="./lib/vue.js"></script>
# 引入jq的文件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.box {
width: 200px;height: 200px;background: red;}
[v-cloak]