Vue快速入门-1-Vue的简单使用

2024-11-20 技术教程

小生博客：http://xsboke.blog.51cto.com

-------谢谢您的参考，如有疑问，欢迎交流

目录:
1. 简单的将数据渲染到DOM2. Vue的"v-"指令3. "v-if"指令的使用4. "v-for"指令的使用5. Vue的事件处理6. "v-model:value"实现双向数据绑定7. Vue实现逆转字符串8. Vue 动态添加class属性,以及三目运算.9. "v-bind:style"指令定义内联样式10. 指令支持数组11. Vue实例各个生命周期的钩子函数

简单的将数据渲染到DOM

<div id="app"> {{message}} -- 使用"{{}}"将数据渲染到DOM </div> <script type="text/javascript"> var app = new Vue({ -- 创建Vue实例 el: '#app', -- 通过属性绑定元素 data:{ message: 'Hello Vue!', -- 设置上下文 } }) </script>Vue的"v-"指令

通过"v-"用来绑定属性,然后对属性值进行操作 <div id="app" v-bind:title='vueTitle'> -- 使用"v-"时不需要再使用"{{}}"渲染 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ vueTitle: 'vue data vueTitle' } })"v-if"指令的使用

只用来判断真假(true|false) <div id="app"> <p v-if="seen">如果是true则可以显示</p> -- 如果seen的值为true则显示p标签,如果为false则不显示 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ seen:true, } }) </script>"v-for"指令的使用

<div id="app"> <ul> <li v-for="item in list"> -- item就是for从list中取出来的变量,仔细看看其实和普通的for循环一样 {{item}} -- 如果循环的是一个字典类型数据,通过 "item." 获取value </li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ list:["Item A","Item B","Item C"] } }) </script>Vue的事件处理

通过"v-on"指令,处理click的事件所有的事件触发时执行的函数,都需要写到Vue实例的的methods选项中, <div id="app"> <p>{{message}}</p> <button v-on:click="showmessage">显示消息</button> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ message: 'Hello Vue!' }, // 所有的函数都定义在methods methods:{ showmessage:function(){ this.message = "Hello World!" } } }) </script>"v-model:value"实现双向数据绑定(就是不同标签中的内容是相同的)

<div id="app"> <p>{{message}}</p> <input v-model:value="message" /> -- input标签和p标签互相随对方改变 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ message: 'Hello Vue!' }, }) </script>Vue实现逆转字符串

<div id="app"> <p>{{message}}</p> <button v-on:click="reverse">逆转消息</button> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ message: 'Hello Vue!' }, methods:{ reverse:function(){ this.message = this.message.split('').reverse().join('') -- Vue逆转字符串,类似python中,先将字符串转换为序列,然后翻转列表,最后在join为字符串 } } }) </script>Vue 动态添加class属性,以及三目运算.

动态添加class属性 <style type="text/css"> .active{ background-color: #0f0; } </style> <body> <div id="app">  <p v-bind:class="{Vactive:isActive}">我是P标签</p> -- 当isActive为true时,class属性才会等于"Vactive",然后将引用上面style定义的CSS样式 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ isActive:true, Vactive:'active' } }) </script> </body> 三目运算 <style type="text/css"> .active{ background-color: #0f0; } .error{ background-color: #f00; } </style> <body> <div id="app">  <p v-bind:class="isActive ? Vactive:Verror">我是P标签</p> -- 当isActive为true时,引用Vactive的值,为false时,引用Verror的值 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ isActive:true, Vactive:'active', Verror:'error', } }) </script> </body>"v-bind:style"指令定义内联样式

"v-bind"可以简写为":",所以"v-bind:style"可以写为":style" <body> <div id="app"> <p :>我是P标签</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ /* Vue的内联样式采用的json格式,而且要使用驼峰命名法, * 和CSS以"-"命名";"结尾是不一样的 */ styleObject:{ backgroundColor: '#00f', fontSize: '20px', } } }) </script> </body>指令支持数组

通俗讲,就是在Vue实例运行的各个阶段可以使用的函数比如: 在Vue实例创建时可以执行created函数在Vue实例被挂载到DOM时可以执行mounted函数在Vue实例更新时,可以执行updated函数 <div id="app"> {{message}} <button @click="change">单击更新message</button> -- "v-on"指令可以简写为"@",所以这里的"v-on:click"简写为了"@click" </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ message:'hello vue!' }, methods: change:function(){ -- 点击button按钮时执行change函数 this.message = 'hello world!' -- 更改message的值 } }, // 钩子函数,不用写在methods中 created:function(){ console.info('Vue对象创建时被调用!'); -- 信息被输入到console控制台 }, mounted:function(){ console.info('Vue对象挂载到dom元素时执行！'); }, updated:function(){ console.info('data数据被更新的时候执行'); } }) </script>