美文网首页vue学习笔记
vue学习第一天笔记

vue学习第一天笔记

作者: 果木山 | 来源:发表于2019-01-03 18:42 被阅读0次

    VUE

    • 下载和安装
      • vue官网
      • npm下载vue模块：npm install vue
      • 下载完后使用里面的vue.js文件即可；
    • vue.js 是MVVM框架
      • 数据可以影响视图，视图也可以影响数据；
    • 体验vue.js
      • 模板渲染；在视图中用{{msg}}来引入msg的属性值到页面中，可以通过app.msg="xx"重新赋值，此时页面也会实时更新；
       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>声明式渲染</title>
 </head>
 <body>
 <div id="app">
     {{msg}}
 </div>
 <script src="js/vue.js"></script>
 <script>
     var app=new Vue({
         el:"#app",
         data:{
             msg:"hello guo"
         }
     })
 </script>
 </body>
 </html>
      • 动态操作DOM属性：通过定义数据，来实时改变DOM中标签元素的属性值；
        • 使用：v-bind:属性名="动态数据"
        • 在webstorm中使用v-bind会报红，所以可以删除它只写冒号后面的代码：如：:属性名="动态数据"
      • 条件判断：通过判断数据的布尔值，进而来控制元素的显示和隐藏；
        • 使用：v-if:"动态数据"
        • 如：v-if:"bok"；指的是判断bok的值，如果为true,则显示该元素，为false，则不显示该元素；
      • 循环：数据和对象的遍历
        • 使用：v-for="(item,index) in 数据数组名或对象名"
        • 其中：
          • 1)如果遍历数组：item获取的是数组中的每个元素，index获取的数组中元素的索引值；
          • 2)如果遍历对象：item获取的是对象中的属性值，index获取的对象中的属性名；
      • 事件：
        • 使用：v-on:事件名="数据"
        • 在webstorm中会报红，所以需要使用@事件名="数据";
        • 如果赋值给事件为函数，函数在应用中必须写在methods中，数据写在data中；
         <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>事件绑定</title>
 </head>
 <body>
 <div id="app">
     <p>{{msg}}</p>
     <button type="button" @click="reverseMsg">顺序</button>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var app=new Vue({
         el:"#app",
         data:{
             msg:"这是事件绑定的数据"
         },
         //函数写在methods中
         methods:{
             reverseMsg:function () {
                 this.msg=this.msg.split("").reverse().join("");
             }
         }
     })
 </script>
 </body>
 </html>
      • 双向数据绑定
        • 表单数据和应用数据的联系，通过v-model来设置表单标签，当表单中输入内容时，可以改变应用中的数据；
        • 如果一个标签想要只赋值一次应用数据，则可以使用v-once，这样只会赋值一次数据，数据变化后，它不会再改变；
         <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>双向绑定数据</title>
 </head>
 <body>
 <div id="app">
     <h1>{{msg}}</h1>
     <!--"v-model"实现表单跟应用的数据变化，通过表单值来改变应用数据-->
     <input type="text" v-model="msg"/>
     <!--"v-once"指的是赋值一次数据-->
     <p v-once>{{msg}}</p>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var app=new Vue({
         el:"#app",
         data:{
             msg:"这是双向绑定数据"
         }
     })
 </script>
 </body>
 </html>
      • 自定义组件
        • 注册组件：通过Vue.component("timet",{template:"<li>xxxxx</li>" });
          • 注册组件名和template模板
          • 使用时，直接使用标签即可；
        • 父级组件传递数据给子级组件；
          • 父级组件设置自定义属性，来向子级传递数据，设置自定义属性用v-bind:属性名="数据值";
          • 子级组件在Vue.component中通过props来获取属性名，即props:["属性名"],则属性名就代表传递来的数据值；
         <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>自定义组件</title>
 </head>
 <body>
 <div id="app">
     <ol>
         <timet v-for="item in getData" v-bind:todo="item" v-bind:key="item.id"></timet>
     </ol>
 </div>
 <script src="js/vue.js"></script>
 <script>
     //注册组件
     Vue.component("timet",{
         props:["todo"],
         template:"<li>{{todo.msg}}</li>"
     });
     var app=new Vue({
         el:"#app",
         data:{
             getData:[
                 {id:0,msg:"这是蔬菜1"},
                 {id:1,msg:"这是蔬菜2"},
                 {id:2,msg:"这是蔬菜3"},
                 {id:3,msg:"这是蔬菜4"}
             ]
         }
     })
 </script>
 </body>
 </html>
      • 表达式和v-html
        • 表达式：{{}}
          • 可以进行设置数据值，如{{msg}}；
          • 可以进行赋值，如{{msg=200}},此时应用中的msg数据也会变化；
          • 可以使用三目(三元表达式)，如{{bok?333:444}},即条件判断成立与否，得到的值不同；
        • v-html：设置在标签上，代表将数据值，以标签的形式插入到该标签中；
         <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表达式</title>
 </head>
 <body>
 <div id="app">
     <!--{{}}表达式，支持 msg 赋值 三目(三元表达式)-->
     {{msg}} {{msg=444}} {{bok?666:777}}
     <!--"v-html"：将变量值，以标签的形式插入到p中-->
     <p v-html="glt"></p>
     <!--表达式，将变量值，以内容值的形式插入到p中-->
     <p>{{glt}}</p>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var app=new Vue({
         el:"#app",
         data:{
             msg:"333",
             bok:true,
             glt:"<li>这是内容</li>"
         }
     })
 </script>
 </body>
 </html>
      • v-if和v-show
        • v-if:判断数据值的布尔值，如果为true,则该元素显示，否则，删除该标签节点；相当于removeChild()；
        • v-show:判断数据值的布尔值，如果为true,则该元素显示，否则，该元素隐藏，不会删除该标签节点；相当于display:none;
        • 如果频繁切换显示或隐藏，就用v-show；判断数据是否存在，就用v-if；

    购物车实例

    • 思路：
      • 下载bootstrap模块，构建静态页面，命令：npm install bootstrap@3;规定版本，否则，一些css样式不能使用；
      • 引入bootstrap.css文件；
      • 构建静态页面，在信息区域，通过在应用区域data内设置ary数组数据，在页面中通过v-for来遍历ary数据，拿到item数据每一项元素，和index，索引值；
      • 删除功能：通过点击表格中的删除按钮，来触发deleteOne函数，函数中删除对应的ary中的数据，进而页面中删除；
        • 重要：通过v-for遍历数组时，拿到每个数组元素的索引index，通过点击事件设置时，将index作为参数传给deleteOne函数，函数内拿到索引值，通过splice就可以删除此项；
      • 删除全部功能：点击删除全部按钮，触发deleteAll函数，将ary赋值为空数组；
        • 为了实现，当删除全部后，让删除全部一行也删除或隐藏，可以在tr上设置v-if或v-show，判断ary的长度是否为0，若为0，则赋值为true，进而该行就隐藏或删除；
      • 增加功能：点击按钮触发addOne函数，函数内将数据插入到ary中；
        • 重点：在输入内容的表单上，设置v-model="xxx"，这样就实现了表单输入数据和应用数据的同步，需注意的是，在应用data中一定要设置shopname和shopprice为空，否则，会报错；
        • 当输入内容后，shopname和shopprice的值就会实时更新，输入完毕后，点击按钮，然后将两个值以对象的形式，插入到数组中；数据增加后，将两个值赋值为空；即重置；
        • 筛选：
          • 当点击按钮后，必须判断shopname和shopprice值是否均存在，如果不存在，则不能提交；
          • 存在的情况下，可以对输入的shopname值进行判断，然后进行一系列的操作；
      • 重置功能：点击重置按钮，然后将shopname和shopprice值赋值为空；
    • 代码：
     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>购物车实例</title>
     <link rel="stylesheet" href="css/bootstrap.css">
     <style>
         .table-bordered{
             border: 2px solid green;
         }
         .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{
             border: 1px solid red;
             vertical-align: middle;
         }
         .btn-danger{
             border-width: 0;
             padding: 5px 15px;
         }
     </style>
 </head>
 <body>
 <div class="container" id="app" style="margin-bottom: 100px;">
     <div class="row">
         <div class="col-md-12">
             <table class="table table-bordered" style="font-size: 20px;">
                 <caption class="text-danger" style="font-size:30px;font-weight: 700">购物车</caption>
                 <tr>
                     <th class="text-center">商品名称</th>
                     <th class="text-center">商品价格</th>
                     <th class="text-center">操作</th>
                 </tr>
                 <tr v-for="(item,index) in ary">
                     <td class="text-center">{{item.name}}</td>
                     <td class="text-center">{{item.price}}</td>
                     <td class="text-center"><button type="button" class="btn-danger" @click="deleteOne(index)">删除</button></td>
                 </tr>
                 <tr v-if="ary.length?true:false">
                     <td colspan="3" class="text-right"><button type="button" class="btn-danger" @click="deleteAll">删除全部</button></td>
                 </tr>
             </table>
         </div>
         <div class="col-md-12">
             <form style="font-size: 20px;">
                 <div class="form-group">
                     <label for="shopname">商品名称</label>
                     <input type="text" class="form-control" id="shopname" v-model="shopname">
                 </div>
                 <div class="form-group">
                     <label for="shopprice">商品价格</label>
                     <input type="number" class="form-control" id="shopprice" v-model="shopprice">
                 </div>
                 <div class="from-group">
                     <input type="button" id="dd" class="btn btn-primary" @click="addOne" value="添加">
                     <input type="button" id="dd1" class="btn btn-warning" @click="resetData" value="重置">
                 </div>
             </form>
         </div>
     </div>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var app=new Vue({
         el:"#app",
         data:{
             shopname:"",
             shopprice:"",
             ary:[
                 {name:"小米6",price:1999},
                 {name:"小米7",price:2999},
                 {name:"小米8",price:3999},
                 {name:"小米9",price:4999}
             ]
         },
         methods:{
             deleteOne:function (index) {
                 console.log(this)
                 this.ary.splice(index,1);
             },
             deleteAll:function () {
                 this.ary=[];
             },
             addOne:function () {
                 //表单中输入内容不为空时，才能添加；
                 if(this.shopname && this.shopprice){
                     //如果商品名称重复，则改变其价格，阻止程序执行；
                     for(var i=0; i<this.ary.length; i++){
                         if(this.ary[i].name===this.shopname){
                             this.ary[i].price=this.shopprice;
                             this.shopname="";
                             this.shopprice="";
                             return;
                         }
                     }
                     //当商品名称不重复时，才能改变价格
                     this.ary.push({
                         name:this.shopname,
                         price:this.shopprice
                     });
                     //添加后，清空表单中内容；
                     this.shopname="";
                     this.shopprice="";
                 }else{
                     alert("内容不能为空，请输入内容")
                 }
             },
             resetData:function () {
                 this.shopname="";
                 this.shopprice="";
             }
         }
     })
 </script>
 </body>
 </html>

    简书知识

    vue学习大纲1-基础，事件和数据交互

    相关文章

      网友评论

        本文标题：vue学习第一天笔记

        本文链接：https://www.haomeiwen.com/subject/aieqrqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        vue学习笔记

        关于我们|服务条款|联系我们|vue学习第一天笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！