这篇博客介绍了Vue.js的基础知识，包括它的渐进式框架特性、在前端领域的地位，以及如何安装和使用Vue。通过实例演示了Vue的指令如v-model、v-if、v-for，组件的创建，以及使用vue-cli和live-server进行项目开发。还讨论了Vue的调试方法和组件间的通信方式。
认识Vue
- 构建用户界面的渐进式框架
- 核心库是关注图层，并且非常容易学习，容易整个其他项目
- 前端核心框架
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以期轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
官网
参考
ui框架
安装Vue
安装地址
- 打开黑窗口
- 安装node 地址
- node -v 查看node版本
- npm -v 查看npm版本
- npm install nrm -g 安装nrm镜像工具
- nrm use taobao 指定要使用的镜像源
- nrm ls 查看当前使用的镜像
- nrm test npm 测试网速
- npm test taobao 测试淘宝
- 补充
- cnpm install npm -g 升级npm
- npm install cnpm -g 安装或者升级cnpm
- cnpm install vue 安装稳定版本
Demo
- 创建空项目
- 初始化项目
- npm init -y
- 会出现 .json 文件 —项目信息
- 项目中安装vue
- npm install vue --save
- 会出现vue文件夹
- 创建html
引入依赖 <script src="node_modules/vue/dist/vue.js"></script>
指令
-
插值表达式
- 格式{{表达式}}
{{name}}- 该表达式支持js语法，可以调用 js内置函数（需返回值）
- 表达式必须有结果
- 可以直接获取vue示例中定义的数据或函数
缺点：
使用{{}}方式在网速出现问题，在数据未加载完成时，页面会出现原始的{{}}，加载完才显示数据
我们称为——插值闪烁
- v-html和v-text
<span v-text="name"></span>- 都解决了插值闪烁问题
区别
v-html：可以编译标签
v-text：只能遍历文本(安全)
- 都解决了插值闪烁问题
- 格式{{表达式}}
-
v-model
<input type="text" v-model="num" />- 双向绑定
-
v-on事件绑定
<button v-on:click="handleClick">点我</button> // 效果一样，@可以写事件表达式 <button @click="num--" >-</button>- 事件 修饰符
- .stop：阻止事件冒泡
- .prevent：阻止默认事件发生
- .capture：使用事件捕获模式
- .self：只有元素自身触发事件才执行
- .once：只执行一次
- 事件 修饰符
-
v-for遍历
<ul> <li v-for="user in users"> </li> </ul> ~~~ -
v-if判断
<h1 v-if="show">你好</h1><!--(一次性的判断) 适合-->
<!-- 前者是：之间删掉代码，后者是：修改css样式类实现 -->
<h1 v-show="show">你很好</h1><!--(性能好)-->
- v-bind
<div v-bind:class="color">这是盒子 </div> 缩写 <div :class="color"> 这是盒子 </div> 在标签内使用变量 - class属性的特殊玩法
<div :class="{red:true,blue:flase}"></div>
- 计算属性
<script>
const app = new Vue({
el: "#app",//Vue作用的标签
computed: {
birth() {
const day = new Date(this.birthday);
return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日"+day.getHours()+"时"+day.getMinutes()+"分"+day.getSeconds()+"秒"
}
}
})
</script>
- 监控
<script>
const app = new Vue({
el: "#app",//Vue作用的标签
//监控
watch: {
// 浅监控
//监控此变量 arg1:修改后的值，arg2：修改前的值
Mydata(arg1, arg2) {
console.log(arg1, arg2)
},
//深监控
//监控对象
person: {
deep: true,
handler(val) {
console.log(val.age);
}
}
}
})
</script>
test
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
<body>
<div id="app">
<button @click="handleClick">点我</button>
<button @click="num--">-</button>
<input type="text" v-model="num"/>
<button @click="num++">+</button>
<input type="text">
<h1>
<span v-text="name"></span> 非常帅
{{num}} 为女神为其着迷
</h1>
<span v-html="name"></span>
<!-- v-model -->
<h1>小葵花课堂</h1>
<input type="checkbox" v-model="lessons" value="java">java<br>
<input type="checkbox" v-model="lessons" value="python">python<br>
<input type="checkbox" v-model="lessons" value="IOS">IOS<br>
<h1>
<span v-text="lessons"></span><br>
<!--格式化数组-->
{{lessons.join(",")}}
</h1>
<br>
<!-- v-on -->
<div style="width: 100px;height: 100px;background-color: cornsilk" @click.stop="print('div')">
div
<!--
当点击button时一定会出发div单击事件
@click.stop 防止触发父事件
-->
<button @click.stop="print('button')">点我试试</button>
<!--阻止默认事件发生并且防止触发父事件-->
<a href="http://www.baidu.com" @click.prevent.stop="print('百度')">百度</a>
</div>
<!-- v-for -->
<!--遍历数组-->
<ul>
<li v-for="user in users">
{{user+"---"+user.name +","+user.age}}
</li>
</ul>
<!--遍历对象-->
<ul>
<li v-for="u in users[0]">
{{u}}
</li>
</ul>
<!--遍历数字-->
<ul>
<li v-for="i in 5">
{{i}}
</li>
</ul>
<br>
<!--判断-->
<!--普通-->
<button @click="show =!show">点击切换</button>
<h1 v-if="show">你好</h1>
<h1 v-show="show">你很好</h1>
<!--与for结合使用 for先运行-->
<ul>
<li v-for="i in 5">
<span v-if="i%2==0">偶数：{{i}}</span>
<span v-else-if="i%3==0">3：{{i}}</span>
<span v-else>奇数：{{i}}</span>
</li>
</ul>
<!--v-bind-->
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div style="width: 100px;height: 100px;" :class="color">
这是盒子
</div>
<!--class 属性特殊玩法-->
<button @click="isRed=!isRed">换色</button>
<div style="width: 100px;height: 100px;" :class="{red:isRed,blue:!isRed}">
这是盒子2
</div>
<!-- 计算属性-->
<h1>
生日：{{birth}}
</h1>
<input type="text" v-model="Mydata">
<h1>Mydata:{{Mydata}}</h1>
<input type="text" v-model="person.age">
<h1>{{person}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//Vue作用的标签
//定义对象
data: {
name: "航哥",
num: "1",
// 数组
lessons: [],
users: [
{name: '小波', age: 18},
{name: '小郭', age: 17},
{name: '小胖', age: 16}
],
show: false,
color: "red",
isRed: false,
birthday: 152903212301,// 毫秒值
Mydata: 1,
person: {
name: "java",
age: 11
}
},
// 计算属性（方法）
computed: {
// 调用此方法不用加（）
birth() {
const day = new Date(this.birthday);
return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日" + day.getHours() + "时" + day.getMinutes() + "分" + day.getSeconds() + "秒"
}
},
// 定义方法
methods: {
handleClick() {
console.log("hello")
},
print(msg) {
console.log(msg)
}
},
// 页面加载成功事件
created() {
//向后台发起ajax请求，完成对data数据初始化
this.name = "<font color='aqua'>申总</font>"
},
//监控
watch: {
// 浅监控
//监控此变量 arg1:修改后的值，arg2：修改前的值
Mydata(arg1, arg2) {
console.log(arg1, arg2)
},
//深监控
//监控对象
person: {
deep: true,
handler(val) {
console.log(val.age);
}
}
}
});
</script>
</body>
</html>
组件
全局组件
用法 Test
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!---->
<counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
template:"<button @click='count++'>点了我{{count}}次</button>",
data(){
return {count:0}
}
})
const app = new Vue({
el: "#app"//Vue作用的标签
});
</script>
</body>
</html>
局部组件
用法Test
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!---->
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const counter ={
template:"<button @click='count++'>点了我{{count}}次</button>",
data(){
return {count:0}
}
};
const app = new Vue({
el: "#app", //Vue作用的标签
data:{
},
components:{
counter:counter
}
});
</script>
</body>
</html>
vue通信
父子通信
父传子：参数
子传父：调用方法
Test
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 2. 发送给num -->
<!-- 公用的方法 -->
<counter :num="count" @incr="add" @decr="reduce"></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const counter = {
template: `<div>
<button @click="handleAdd">+</button>
<button @click="handleReduce">-</button>
<h1>num:{{num}}</h1></div>
`
/* 3.子接收num */
, props: ['num'],
/*
props:{
type:Array,//指定类型
default:["java"]// 默认值
}
*/
methods: {
handleAdd() {
/*子调用父的方法*/
this.$emit('incr');
},
handleReduce() {
this.$emit('decr');
}
}
}
const app = new Vue({
el: "#app",
data: {
/*1. 父要发送的变量*/
count: 0
},
components: {
/*调用子*/
counter: counter
},
// 方法
methods: {
add() {
this.count++;
},
reduce() {
this.count--;
}
}
})
</script>
</body>
</html>
debugger调试
在方法出添加
debugger
单词 就是debugger运行 按F12可查看效果
vue-cli
-
介绍:
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
官网
安装
安装命令: npm install -g vue-cl -
操作
vue init webpack
-
文件结构
入口文件：main.js
-
单文件组件
每一个.vue文件，就是一个独立的vue组件。类似于我们刚才写的login.js和register.js只不过，我们在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。
而单文件组件中包含三部分内容：
- template：模板，支持html语法高亮和提示
- script：js脚本，这里编写的就是vue的组件对象，还可以有data(){}等
- style：样式，支持CSS语法高亮和提示
每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。
-
运行
npm run dev
npm start
都可以启动项目
live-server
- 简介
地址；https://www.npmjs.com/package/live-server
- 这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS，但不能用于部署最终的网站。
- 安装和运行参数
npm install -g live-server - 运行时,直接输入命令live-server
另外，你可以在运行命令后，跟上一些参数以配置：
--port=NUMBER - 选择要使用的端口，默认值：PORT env var或8080
--host=ADDRESS - 选择要绑定的主机地址，默认值：IP env var或0.0.0.0（“任意地址”）
--no-browser - 禁止自动Web浏览器启动
--browser=BROWSER - 指定使用浏览器而不是系统默认值
--quiet | -q - 禁止记录
--verbose | -V - 更多日志记录（记录所有请求，显示所有侦听的IPv4接口等）
--open=PATH - 启动浏览器到PATH而不是服务器root
--watch=PATH - 用逗号分隔的路径来专门监视变化（默认值：观看所有内容）
--ignore=PATH- 要忽略的逗号分隔的路径字符串（anymatch -compatible definition）
--ignorePattern=RGXP-文件的正则表达式忽略（即.*\.jade）（不推荐使用赞成--ignore）
--middleware=PATH - 导出要添加的中间件功能的.js文件的路径; 可以是没有路径的名称，也可以是引用middleware文件夹中捆绑的中间件的扩展名
--entry-file=PATH - 提供此文件（服务器根目录）代替丢失的文件（对单页应用程序有用）
--mount=ROUTE:PATH - 在定义的路线下提供路径内容（可能有多个定义）
--spa - 将请求从/ abc转换为/＃/ abc（方便单页应用）
--wait=MILLISECONDS - （默认100ms）等待所有更改，然后重新加载
--htpasswd=PATH - 启用期待位于PATH的htpasswd文件的http-auth
--cors - 为任何来源启用CORS（反映请求源，支持凭证的请求）
--https=PATH - 到HTTPS配置模块的路径
--proxy=ROUTE:URL - 代理ROUTE到URL的所有请求
--help | -h - 显示简洁的使用提示并退出
--version | -v - 显示版本并退出
扫一扫
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
