本文是一篇关于Vue.js的详细教程，涵盖了如何学习Vue，包括其概念、MVVM模式、指令操作、JSON-server的使用、生命周期、组件、脚手架、axios、swiper、路由等内容。重点讨论了Vue的组件化特性，深入讲解了组件的分类、通信、模板和生命周期，并介绍了常用的指令修饰符和路由的使用技巧。同时，还提到了Vue的脚手架工具和axios库的简单介绍，以及如何在实际项目中应用路由。
文章目录
一.如何学习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-prevue渲染的时候会略过此指令，不执行
回忆：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] 
最低0.47元/天 解锁文章
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
