什么是Vue.js
- Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App,Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
- Vue.js是前端的主流框架之一，和Angular.js,React.js一起，并称为前端三大主流框架！
- Vue.js 是一套构建用户界面的框架，只关注视图层，他不仅易于上手，还便于与第三方库或既有项目整合（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
- 前端的主要工作？主要负责MVC中V这一层；主要工作就是和界面打交道来制作前端页面效果；
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架则需要重新架构整个项目
- node中的express
- 库（插件）：提供某一个小功能，对目标的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
- 1.从jquery切换到Zepto
- 2.从EJS切换到art-template
Node（后端）中MVC与前端中的MVVM之间的区别
- MVC 是后端的分层开发概念
- MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel
Vue.js 基本代码结构和插值表达式、v-clock/v-text/v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>helloWorld</title>
<!-- 1.先导入vue的包 -->
<script src="vue-2.4.0.js"></script>
</head>
<body>
<!-- 将来new的Vue实例，会控制这个元素中所有的内容 就是mvvm里面的v(view)页面-->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
// 创建一个Vue的实例
// 当我们导入包之后，浏览器的内存中，就多一个Vue的构造函数
// 注意:我们new出来的这个vm对象，就是我们mvvm中的vm(调度者)
var vm = new Vue({
el: '#app', //表示，当前我们new的这个vue实例，要控制页面上的那个区域
// 这里的data就是mvvm的m,专门用来保存每个页面的数据
data: { //data属性中，存放的是el中要用到的数据
msg: '欢迎开始Vue的学习！' //通过Vue 提供的指令，很方便的就能把数据渲染到页面上，程序不在手动操作DOM元素
}
});
</script>
</body>
</html>
v-text/v-html/v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-lock插值和v-on事件</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
<div v-cloak>99999{{msg}}6666</div>
<!-- 默认 v-text 是没有闪烁的 -->
<!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
<div v-text="msg2">123</div>
<div v-html="msg3">123</div>
<!-- v-bind：是vue中，提供的用于绑定属性的指令 -->
<!-- 注意v-bind：指令可以被简写：要绑定的属性，在v-bind中可以写合法的JS表达式 -->
<!-- <input type="button" name="" id="" value="按钮" v-bind:title="mytitle" /> -->
<input type="button" name="" id="" value="按钮" :title="mytitle+'1111'" />
<!-- vue提供了v-on:事件绑定机制 -->
<!-- v-on的缩写@ -->
<input type="button" name="" id="" value="点击一下" @click="alert" />
</div>
<script src="vue-2.4.0.js"></script>
<script>
var vm =new Vue({
// 区域内容
el:'#app',
// 数据
data:{
msg:'你好',
msg2:'12456',
msg3:'<a href="http://www.baidu.com">百度一下<a>',
mytitle:'自定义按钮的title'
},
// 方法
methods:{
alert:function(){
alert('你好！');
}
},
})
</script>
</body>
</html>
跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑马灯</title>
<!-- 引入vue的包 -->
<script src="vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 页面布局 -->
<input type="button" name="" id="" value="浪起来" @click="lang" />
<input type="button" name="" id="" value="别浪" @click="stop" />
<div>{{msg}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
// 数据
data: {
msg: '猥琐发育~~~，别浪！',
interval: null,
},
methods: {
// 分析：使字符串轮播起来，获取第一个字符串放到最后面，然后定时器一直使用能够方法
// 要获取data的数据要用this
lang() {
// this指向問題
// var _this=this;
// setInterval(function(){
// // 获取第一个字符串
// var start = _this.msg.substring(0, 1);
// // 获取除第一最后全部字符串
// var end = _this.msg.substring(1);
// _this.msg = end + start;
// // console.log(this.msg);
// },200);
// 判断是否有定时器
if(this.interval!=null)return;
//箭头函数this始终指向自身
this.interval = setInterval(() => {
// 获取第一个字符串
var start = this.msg.substring(0, 1);
// 获取除第一最后全部字符串
var end = this.msg.substring(1);
this.msg = end + start;
// console.log(this.msg);
}, 200);
},
stop(){
//清除定时器
clearInterval(this.interval);
// 要将定时器的值变回null
this.interval=null;
}
},
})
</script>
</body>
</html>
v-on指令和事件修饰符
事件修饰符：
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获机制
- .self 只当事件在该元素本身（比如不是子元素） 触发时触发回调
- .once 事件只触发一次
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件修饰符</title>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 事件修饰符 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 -->
<!-- 阻止事件冒泡 -->
<!-- <div id="box" @click="boxhandel" style="width: 500px; height: 300px; background-color: gray;">
<input type="button" name="" id="" value="点击" @click.stop="btnhandel" />
</div> -->
<!-- 阻止默认事件 -->
<!-- <a href="https://www.baidu.com" @click.prevent="baidu">百度一下，你就知道</a> -->
<!--添加侦听事件捕获事件 （从外往内触发）先触发box在触发btn -->
<!-- <div id="box" @click.capture="boxhandel" style="width: 500px; height: 300px; background-color: gray;">
<input type="button" name="" id="" value="点击" @click="btnhandel" />
</div> -->
<!-- 只触发自身事件 -->
<!-- <div id="box" @click.self="boxhandel" style="width: 500px; height: 300px; background-color: gray;">
<input type="button" name="" id="" value="点击" @click="btnhandel" />
</div> -->
<!-- .slef 与.stop 之间的区别 -->
<!-- <div id="outer" @click="outer">
<div id="box" @click="boxhandel" style="width: 500px; height: 300px; background-color: gray;">
<input type="button" name="" id="" value="点击" @click.stop="btnhandel" />
</div>
</div> -->
<!-- .slef只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为 -->
<div id="outer" @click="outer">
<div id="box" @click.self="boxhandel" style="width: 500px; height: 300px; background-color: gray;">
<input type="button" name="" id="" value="点击" @click="btnhandel" />
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
boxhandel(){
console.log('触发box事件');
},
btnhandel(){
console.log('触发按钮事件');
},
baidu(){
console.log('百度一下');
},
outer(){
console.log('触发outer事件');
}
}
});
</script>
</body>
</html>
vue指令之v-model和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向绑定</title>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- v-bind只能单向绑定，从M自动绑定到V 无法实现数据的双向绑定-->
<!-- <input type="text" name="" id="" :value="msg" /> -->
<!-- 使用 v-model指令，可以实现表单元素和model中数据的双向数据绑定 -->
<!-- 注意：v-model只能运行在表单元素中 -->
<!-- input(text,radio,check,adress,.... ) select textarea -->
<input type="text" name="" id="" v-model="msg" width="100%"/>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'你好！'
},
methods:{}
});
</script>
</body>
</html>
简易计算器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简易计算器</title>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="number" name="" id="" v-model="n1" />
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" name="" id="" v-model="n2" />
<input type="button" name="" id="" value="=" @click="btnshandel" />
<input type="text" name="" id="" v-model="result" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+',
},
methods: {
//
btnshandel() {
// switch (this.opt) {
// case '+':
// this.result = parseInt(this.n1) + parseInt(this.n2);
// break;
// case '-':
// this.result = parseInt(this.n1) - parseInt(this.n2);
// break;
// case '*':
// this.result = parseInt(this.n1) * parseInt(this.n2);
// break;
// case '/':
// this.result = parseInt(this.n1) / parseInt(this.n2);
// break;
// }
// eval()方法将字符串变成表达式 正式开发少用
var code = 'parseInt(this.n1)' +this.opt+ 'parseInt(this.n2)';
this.result = eval(code);
}
}
});
</script>
</body>
</html>
在vue中使用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue样式class</title>
<style>
body {
background-color: #ccc;
}
.red {
color: red;
}
.italic {
font-style: italic;
}
.thin {
font-weight: 200;
}
.active {
letter-spacing: 0.5em;
}
</style>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个很大的h1</h1> -->
<!-- 第一种方式，直接传递一个数组，注意：这里的class需要使用v-bind -->
<!-- <h1 :class="['red','thin']">这是一个很大的h1</h1> -->
<!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 -->
<!-- <h1 :class="['red','thin',flag?'italic':'']">这是一个很大的h1</h1> -->
<!-- 在数组中使用对象来代替三元表达式，提高代码的可能性 -->
<!-- <h1 :class="['red','thin',{'active' :flag}]">这是一个很大的h1</h1> -->
<!-- 在为class使用v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号， -->
<h1 :class="obj">这是一个很大的h1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
obj: {
red: true,
thin: true,
italic: true
}
},
methods: {}
});
</script>
</body>
</html>
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue中样式style</title>
<script src="vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="styleObject">这是一个h1</h1> -->
<h1 :style="[styleObject,styleObject1]">这是一个h1</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
// font-weight 因为有-所以要加引号
styleObject:{color:'red','font-weight':200},
styleObject1:{'font-style':'italic'}
},
methods:{}
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
