Vue.js入门基础（一）最近突然想学一下vue.js，之前遇到过比较麻烦的前端渲染操作，用jquery append() html元素，是真的有点头疼。然后了解到vue.js支持双向绑定什么的，会简单很多，专门来学习一下，当然也得从最基础的开始学起。
1.MVVM模式
MVVM是Model-View-ViewModel的简写MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div01">
<p>{{message}}</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#div01", //表示当前实例要控制的元素
data: { //data属性中存放的是el中要用的数据
message: '这是当前el下的data属性中的message'
}
})
</script>
2.v-text、v-html 基本使用
代码示例
v-text、以及插值表达式都可以想指定标签输入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p >{{message}}-原值</p> <!-- 插值表达式不会覆盖原值 -->
<p v-text="message">-原值</p> <!-- v-text会覆盖原值 -->
<p v-html="message2"></p> <!-- v-html可以将字符串解析为html -->
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app" ,
data: {
message: 'Test',
message2: '<h1>这是一个h1标签</h1>'
}
})
</script>效果
3.v-bind
v-bind:绑定属性的指令
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p >{{message}}-原值</p> <!-- 插值表达式不会覆盖原值 -->
<p v-text="message">-原值</p> <!-- v-text会覆盖原值 -->
<p v-html="message2"></p> <!-- v-html可以将字符串解析为html -->
<button v-bind:title="title">按钮</button> <!-- v-bind:绑定属性的指令 -->
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app" ,
data: {
message: 'Test',
message2: '<h1>这是一个h1标签</h1>',
title: '这是一个标题'
}
})
</script>效果
注意
<button v-bind:title="title">按钮</button>
//也可以简写为下面的
<button :title="title">按钮</button>4.v-on
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-bind:title="title" v-on:click="show">按钮</button> <!-- v-bind:绑定属性的指令 -->
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
methods: { // methods属性中定义了当前示例所有可用的方法
show: function() {
alert("Hello");
}
}
})
</script>
效果
5.跑马灯小练习小练习
效果
{{msg}}
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="start">开始</button>
<button v-on:click="stop">停止</button>
<p>{{msg}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: '我是头，我是尾巴`（￣▽￣）` ',
intervalId: null
},
methods: { // methods属性中定义了当前示例所有可用的方法
start() {
if (this.intervalId != null) {
return
};
this.intervalId = setInterval(() => {
var head = this.msg.substring(0, 1);
var rear = this.msg.substring(1);
this.msg = rear + head;
}, 100);
},
stop() {
console.log(this.intervalId);
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
标签云
ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理
Comments | NOTHING