安装
共有三种方式：
- 直接CDN引入
- 开发环境：包括了源码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生产环境：压缩过，体积更小
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 下载和引入
- NPM安装
Hello vue
vue的代码风格是声明式编程，方便实现模板与数据分离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h3>{{name}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello vue',
name: 'names'
}
})
</script>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello list</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [1,2,3,4,5]
}
})
</script>
</body>
</html>
按钮点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello button</title>
</head>
<body>
<div id="app">
<h3>计数器当前值: {{count}}</h3>
<!-- 简单方式，直接对变量进行操作-->
<button v-on:click="count++">+</button>
<button v-on:click="count--">-</button>
<!-- 使用函数绑定方式-->
<button v-on:click="add">+</button>
<!-- @为v-on的另一种写法-->
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add: function () {
console.log("执行加法");
//这里需要使用this.count来获取count变量,或者使用app.count
this.count++;
},
sub() {
console.log("执行减法");
app.count--;
}
}
})
</script>
</body>
</html>
双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message: 'message'
}
})
</script>
</body>
</html>
网友评论