vue 入门 简单学习
2018-05-13 本文已影响0人
不睡觉呀
第一步:下载一个vue的库
随便在网上找一个cdn
https://cdn.bootcss.com/vue/2.5.15/vue.min.js
第二步：安装express
{
"name": "hahaha",
"version": "0.0.1",
"paivate": true,
"description": "hahhahahahah",
"dependencies": {
"express": "^4.16.3"
}
}
第三步：写一个简单的运行服务器
var express = require("express");
var app = express();
app.use(express.static(__dirname))
.listen(8080);
第四步：简单的文本内容的替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 简单文本替换</title>
</head>
<body>
<div class="a">
小明今年{{message}}岁了
</div>
<script src="vue.min.js"></script>
<script>
var a = new Vue({
el:".a",
data:{
message:"88"
}
});
setTimeout(function(){
a.message = "99"
},2000);
</script>
</body>
</html>
-效果展示：
image.png
image.png
-两秒钟之后内容替换为99
第五步：vue 输入框，响应式文本替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 输入框，响应式文本替换</title>
</head>
<body>
<div id="a">
<input type="text" v-model="name">
输入的内容是：{{name}}
</div>
<script src="vue.min.js"> </script>
<script>
new Vue({
el:"#a",
data:{
name:""
}
});
</script>
</body>
</html>
-
效果展示：
image.png
- 文本内容根据输入框的内容进行响应式的展示
第六步：vue 扩展标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 扩展标签内容</title>
</head>
<body>
<div id="a">
<message title="this is a title" content="this is content"></message>
<message title="this is a title" content="this is content"></message>
<message title="this is a title" content="this is content"></message>
<message title="this is a title" content="this is content"></message>
<message title="this is a title" content="this is content"></message>
</div>
<script src="vue.min.js"></script>
<script>
Vue.component("message",{
props:["title","content"],
template:"<div><h1>{{title}}</h1><p>{{content}}</p></div>"
});
new Vue({
el:"#a"
});
</script>
</body>
</html>
-
展示效果：
image.png
第七步：vue 标签替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 模板</title>
</head>
<body>
<div id="app">
<p>123</p>
</div>
<script src="vue.min.js"></script>
<script id="tpl" type="x-template">
<div class="tpl">
<p>this is a tpl from script</p>
</div>
</script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
template:"#tpl"
});
</script>
</body>
</html>
-
效果展示：
image.png
- 对原有标签的内容进行了一个标签的替换
