VUE学习笔记01

转x33g5p2x  于2022-02-15 转载在 Vue.js  
字(3.3k)|赞(0)|评价(0)|浏览(559)

1:创建好vue项目然后新建一个html，通过cdn的方式引入vue

Vue常用7个属性

  • 1：el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

  • 2：data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

  • 3：template属性

用来设置模板，会替换页面元素，包括占位符。

  • 4：methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

  • 5：render属性

创建真正的Virtual Dom

  • 6：computed属性

用来计算

  • 7：watch属性

watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

2:接下来创建一个简单的div使用el:绑定，将新建的vue和元素绑定起来：

  1. <body>
  3.     <div id = "app"> 
  4.         {{message}}
  5.     </div>
  6.     
  7. </body>
  9. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  10. <script>
  12.     var vm = new Vue({
  13.         el:"#app",
  14.         data:{
  15.             message:"hello,vue!"
  16.         }
  18.     });
  19. </script>

3：v-bind="…" （指令）类似于 {{ …}}

  1. <span v-bind:title="message">
  2.             鼠标悬停查看绑定信息
  3.         </span>

将鼠标移动到这地方就可以看到绑定信息

4：v-if v-else v-else-if:

  1. <div id = "app"> 
  2.         <h1 v-if="ok">YES</h1>
  3.         <h1 v-else>NO</h1>
  4.     </div>

  1. <body>
  2.     <div id = "app"> 
  3.         <h1 v-if="type ==='A'">A</h1>
  4.         <h1 v-else-if="type ==='B'">B</h1>
  5.         <h1 v-else>C</h1>
  6.     </div>
  7.     
  8. </body>
  10. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  11. <script>
  13.     var vm = new Vue({
  14.         el:"#app",
  15.         data:{
  16.         type: 'A'
  17.         }
  19.     });
  20. </script>

5:循环 v-for

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 导入vue.js -->
  9.    
  10. </head>
  11. <body>
  13.     <div id = "app"> 
  14.         <li v-for="item in items">
  15.             {{item.message}}
  16.         </li>
  17.     </div>
  18.     
  19. </body>
  21. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  22. <script>
  24.     var vm = new Vue({
  25.         el:"#app",
  26.         data: {
  28.             items: [
  29.               {message:'范涛之'},
  30.               {message:'邓思佳'}
  31.             ]
  32.       
  33.         }
  35.     });
  36. </script>
  37. </html>

6: 事件：

  1. <body>
  2.     <div id = "app"> 
  3.         <button v-on:click="sayHi">click me </button>
  4.     </div>
  5.     
  6. </body>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  9. <script>
  11.     var vm = new Vue({
  12.         el:"#app",
  13.         data: {
  14.             message:"范涛之啦啦啦"
  15.         },
  16.         methods: {  //方法必须定义在VUE的Method对象中,v-on：事件
  17.             sayHi: function(){
  18.                 alert(this.message)
  19.             }
  20.         }
  21.     });
  22. </script>

7：vue双向绑定：v-model

  1. <body>
  2.     <div id = "app"> 
  3.      输入的文本： <input type="text" v-model="message"></input> {{message}}
  4.     </div>
  5.     
  6. </body>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  9. <script>
  11.     var vm = new Vue({
  12.         el:"#app",
  13.         data:{
  14.             message:"123"
  15.         }
  16.        
  17.     });
  18. </script>

单选框：

  1. <body>
  2.     <div id = "app"> 
  4.         性别：
  5.         <input type="radio" name="sex" value="男" v-model="qinjiang">男</input>
  6. <!-- v-model 可以进行双向的数据绑定 -->
  7.          <input type="radio" name="sex" value="女" v-model="qinjiang">女</input>
  8.          选中了谁 :{{qinjiang}}
  9.     </div>
  11.     
  12. </body>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  15. <script>
  17.     var vm = new Vue({
  18.         el:"#app",
  19.         data:{
  20.          qinjiang:''
  21.         }
  22.     });
  23. </script>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/justleavel/article/details/122944802

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScript前端vue学习

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com