1、直接引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、Vue创建步骤
- 创建Vue实例
- 创建挂载点
el: '#app'，通过id属性加载挂载点 - 然后就可以开始
v-model数据绑定了
<body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // dom思路：先获取dom，再操作节点 // vue思路：创建vue实例，把实例的数据跟页面绑定在一起 // 1、创建Vue实例 new Vue({ // 2、创建挂载点 el: '#app' }) </script> </body> </html>
3、绑定文本{{}}
<body> <div id="app"> <!-- 1、{{}}:绑定文本 --> <div class="case1"> <h1>1、绑定文体</h1> <h1>{{ message }}</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // dom思路：先获取dom，再操作节点 // vue思路：创建vue实例，把实例的数据跟页面绑定在一起 // 1、创建Vue实例 new Vue({ // 2、创建挂载点 el: '#app', data: { message: 'Hello world', }, }) </script> </body> </html>
4、绑定属性v-bind
<img v-bind:src="url"><img :src="url">
<body> <div id="app"> <!-- 2、v-bind:绑定属性 --> <div class="case2"> <h1>2、绑定属性</h1> <img v-bind:src="url"> <img :src="url"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // dom思路：先获取dom，再操作节点 // vue思路：创建vue实例，把实例的数据跟页面绑定在一起 // 1、创建Vue实例 new Vue({ // 2、创建挂载点 el: '#app', data: { message: 'Hello world', url: 'image/1.jpg', }, }) </script> </body> </html>
5、绑定方法v-on
v-on:click="sayHi"@click="sayHi"
<body> <div id="app"> <!-- 3、v-on:绑定事件 --> <div class="case3"> <h1>3、绑定事件</h1> <button v-on:click="sayHi">绑定事件</button> <button @click="sayHi">绑定事件（简写）</button> <!-- 改变图片 --> <button @click="changeImg">改变图片</button> <!-- 换行 --> <br> <!-- 加减法 --> <div style="display: flex;align-items:flex-end;"> <button @click="sub">-</button> <h1>{{ number }}</h1> <button @click="add">+</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // dom思路：先获取dom，再操作节点 // vue思路：创建vue实例，把实例的数据跟页面绑定在一起 // 1、创建Vue实例 new Vue({ // 2、创建挂载点 el: '#app', data: { message: 'Hello world', url: 'image/1.jpg', number: 0 }, methods: { sayHi() { alert('Hello world!'); }, changeImg() { this.url = 'image/2.jpg'; }, add() { this.number++ }, sub() { if (this.number > 0) { this.number--; } } } }) </script> </body> </html>
6、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #app { display: flex; justify-content: space-between; } img { width: 200px; height: 100px; } </style> </head> <body> <div id="app"> <!-- 1、{{}}:绑定文本 --> <div class="case1"> <h1>1、绑定文体</h1> <h1>{{ message }}</h1> </div> <!-- 2、v-bind:绑定属性 --> <div class="case2"> <h1>2、绑定属性</h1> <img v-bind:src="url"> <img :src="url"> </div> <!-- 3、v-on:绑定事件 --> <div class="case3"> <h1>3、绑定事件</h1> <button v-on:click="sayHi">绑定事件</button> <button @click="sayHi">绑定事件（简写）</button> <!-- 改变图片 --> <button @click="changeImg">改变图片</button> <!-- 换行 --> <br> <!-- 加减法 --> <div style="display: flex;align-items:flex-end;"> <button @click="sub">-</button> <h1>{{ number }}</h1> <button @click="add">+</button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // dom思路：先获取dom，再操作节点 // vue思路：创建vue实例，把实例的数据跟页面绑定在一起 // 1、创建Vue实例 new Vue({ // 2、创建挂载点 el: '#app', data: { message: 'Hello world', url: 'image/1.jpg', number: 0 }, methods: { sayHi() { alert('Hello world!'); }, changeImg() { this.url = 'image/2.jpg'; }, add() { this.number++ }, sub() { if (this.number > 0) { this.number--; } } } }) </script> </body> </html>
