day 73 初学vue (1)

前情提要:

　　vue 框架的初学习,

　　　　主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list

　　　　　　学习准备,感谢学习资源:

vue 官网:https://cn.vuejs.org/v2/guide/instance.html

vue 菜鸟:http://www.runoob.com/vue2/vue-tutorial.html

vue 大佬简书:https://www.jianshu.com/p/c4a87e1b4ef7

　　　　　　　一: vue的使用入门:

　　　　　　　　　　1:vue.js 的下载

　　　　vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。

　　　　另外几个常见的工具库：react.js /angular.js

　　　　官方网站：

　　　　中文：https://cn.vuejs.org/

　　　　英文：https://vuejs.org/

　　　　官方文档：https://cn.vuejs.org/v2/guide/

　　　　vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。

　　　　　　　　　　　2:vue.js库的基本使用　

　　　　在github下载：https://github.com/vuejs/vue/releases

　　　　在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html

　　　　vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

　　　　下图是github网站下载的vue.js目录

　　　　　　　　总结:

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",
     data: {
         数据变量:"变量值",
         数据变量:"变量值",
         数据变量:"变量值",
     },
   });
   
   el:设置vue可以操作的html内容范围，值就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

　　　　　　　　　　3:vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{  }}
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      标签元素：
              <h1>{{ name }}</h1>
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      表单元素：
              <input v-model="name">
      
   使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

　　二:常用指令:

　　　　1:常用指令

　　指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

　　在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

　　指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

　　因为vue的历史版本原因，所以有一部分指令都有两种写法：

　　　　　　2:常用指令-操控属性

　　　　　　2->1:格式

　　　　　　　　　2->2:实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="index">
    <img :src="url" :alt="title"><br>
    <input :type="type" placeholder="请输入wifi密码"> <button @click="type='text'">显示密码</button>
</div>

<script>
    let vm = new Vue({
        el:"#index",
        data:{
          url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
          title:"路飞学成",
          type:"password"
        }
    })
</script>
</body>
</html>

View Code

　　　　　　　　　　2->3:实例

　　　　　　3:事件操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>
<body>

<div id="app">
    <button @click="add">+</button>
    <input type="text" :value="num">
    <button @click="jian">-</button>
</div>
</body>
<script>
    let nv =new Vue({
        el:"#app",
        data:{
            num:0


        },
        methods:{
            add() {
                this.num++
            },
            jian(){
                if (this.num<=0){
                    this.num=0
                }
                else {
                this.num--}

            }
        }




    })
</script>
</html>

View Code

　　　　　　　　4:vue的样式操作

　　　　　　　　4>1:class

　　　　　　格式:

　　　　　　4>1>1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>
        .box1 {
            color: red;
            border: 1px solid #000;
        }

        .box2 {
            background-color: orange;
            font-size: 32px;
        }

    </style>
</head>
<body>

<div id="app">

    <!--方式一,直接class 类名值为一个对象-->

    <p :class="{box1:myclass1}"> 一个段落</p>
    <p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3  }" >又一个段落</p>
    <button @click="add">
     切换
    </button>
</div>


<script>
    let mv = new Vue({
        el: "#app",
        data: {
            myclass1: true,
            myclass2: true,
            myclass3: true,


        },
        methods:{
            add(){
                this.myclass3=!this.myclass3


            }


        }


    })


</script>

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>


    <style>
        .box6{
            color: red;

        }
        .box7{
            background-color: blue;
        }
        .box8{
            font-size: 7px;
        }



    </style>
</head>
<body>
<div id="app">
        <p :class="mycls1">这是内容</p>
        <p :class="mycls1">这是内容</p>
        <p :class="[mycls1,mycls2]">这是内容</p>


</div>


<script>
    let vm =new  Vue({
        el:"#app",
        data:{
            mycls1: {
                box6: true,
                box7: true,
            },
            mycls2:{
              box8:true,


            }



        }



    })


</script>

</body>
</html>

View Code

　　　　　　　　4>2:style

格式1：值是json对象，对象写在元素的:style属性中
     标签元素：
             <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
     data数据如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
               <div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
                styleObject: {
                     color: 'red',
                     fontSize: '13px'
                          }
                 }

格式3：值是数组
  标签元素：
                <div v-bind:style="[style1, style2]"></div>
    data数据如下：
                data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
                }

代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>



    </style>


</head>
<body>
<div id="app">
    <p :style="{backgroundColor:bg,color:cg}" >一段字</p>
    <br>
     <button @click="change1"> 转换</button>
    <br>
    <p :style="p_style">另外一段字</p>
    <br>
    <button @click="p_style.backgroundColor='red'">
转换2
    </button>
</div>



</body>

<script>
    let vm =new Vue({
        el:"#app",
        data:{
            bg:"red",
            cg:"pink",
            p_style:{
                backgroundColor:"orange",
                color:"yellow"


            }



        },
        methods:{
            change1(){
                // alert("123")
                this.bg="green"


            }

        }


    })


</script>

</html>

View Code

　　　　5 vue 选项卡实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
                <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <style>
        .box1{
            background-color: red;
        }
        .box2{
            background-color: yellow;
        }
        .bg{
            background-color: pink;
            width: 300px;
            height: 300px;
        }
        .active{
           display:none

        }

    </style>
</head>



<body>
<div id="app">
    <span @click="index=0"  :class="index==0?'box2':'' ">视图1</span>
    <span @click="index=1" :class="index==1?'box2':'' ">视图2</span>
    <span  @click="index=2" :class="index==2?'box2':''">视图3</span>
    <div class="bg" :class="index==0?'':'active'">视图内容1</div>
    <div class="bg" :class="index==1?'':'active'">视图内容2</div>
    <div class="bg" :class="index==2? '':'active'">视图内容3</div>

</div>



</body>


<script>
    let vm =new Vue({
        el:'#app',
        data:{
           index:0
        },
        methods:{},




    })

</script>
</html>

View Code

　　　　　　　　6: v-if 的使用

　　　　格式:

　　　　实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
                <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>
<body>
<div id="app">

    <div v-if="flag">
    登录<input type="text">
    注册<input type="text">
    </div>
    <div v-else="!flag">
        暂时不知道些什么
    </div>
    <p v-if="">{{msg}}</p>


    <input type="text" v-model:value="msg">

    <button @click="g"  >切换</button>


</div>
</body>
<script>
    let vm =new Vue({
        el:'#app',
        data:{
            msg:'请输入内容',
            flag:true


        },
        methods:{
            g(){
                this.flag=!this.flag;
                // this.flag=!this.flag

            }
        }





    })


</script>


</html>

View Code

　　　　　　7:v-for

　　　　　　代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>
<body>
<div id="app">
    <table border="1" bgcolor="yellow">
        <tr>
            <th>序号</th>
            <th>id</th>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <tr v-for="list ,key in  lists">
            <td>{{key}}</td>
            <td>{{list.id}}</td>
            <td>{{list.title}}</td>
            <td>{{list.prcie}}</td>


        </tr>
    </table>


</div>
<!--<div id="app">-->
<!--&lt;!&ndash;<p>{{msg}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;<p>lists</p>&ndash;&gt;-->
<!--<table>-->
<!--<tr v-for="list in lists">-->
<!--<td>{{list.id}}</td>-->


<!--</tr>-->
<!--</table>-->

<!--</div>-->


</body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            lists: [
                {"id": 1, "title": "book1", "prcie": 200},
                {"id": 2, "title": "book2", "prcie": 300},
                {"id": 3, "title": "book3", "prcie": 400},
                {"id": 4, "title": "book4", "prcie": 500},

            ]


        },
        methods: {}


    })

</script>


</html>

View Code

posted on 2019-04-23 20:39 百里丶落云阅读(167) 评论(0) 编辑收藏举报

刷新页面返回顶部