Vue.JS基础的详讲( MVVN )
发表更新Vue.JS

Vue.JS基础的详讲( MVVN )

一 vue.js的M-V-VM思想

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

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

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

　　3. ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，

　　　　> 负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

二.大致的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        // 创建vm对象
        var vm = new Vue({
            el: "#app",
            data: {
                name:"大标题",
                age:16,
            },
        })
    }
    </script>
</head>
<body>
    <div id="app">
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <h1>{{name}}</h1>
        <p>{{age}}</p>
        <!-- 在表单输入框中显示数据要使用v-model来完成 -->
        <input type="text" v-model="name">
    </div>
</body>
</html>

  1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}

  2. 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值

　　　则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

  1. 双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.
    　v-html必须在html标签里面作为属性写出来.
<span v-html="img"></span>
<script>
let vm = new Vue({
el:".app",
data:{
img:'<img src="images/shendan.png">',
}
})
</script>
  1. 在输出内容到普通标签的使用{{ }}还支持js代码。
　　<h1>{{str1.split("").reverse().join("")}}</h1>
  1. 支持js的运算符
　　<h1>{{num1+3}}</h1>
  1. 三元运算符,类似于python里面的三元表达式
    　　三元运算符的语法:
    　　　　判断条件 ? 条件为true : 条件为false的结果
　　　　<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>

　　python 三元表达式[三目运算符]的语法:

　　　　a if 条件 else b
  1. 图片标签
<span v-html="img"></span>
<img :src="img2" alt="" width="200px">  <!-- 冒号：表示 设置属性 -->

data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               img2:'img/1.png' , //用设置属性的方法  :src='img2'
           }

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

<div id="app">
    <span v-html="img"></span>
    <img :src="img2" alt="" width="200px">  <!-- 冒号：表示 设置属性 -->
    <img v-bind:src="img2" width="50">  <!--1.0版本用  v-bind： 设置属性-->
</div>

<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               img2:'img/1.png' , //用设置属性的方法  :src='img2'
           }

       })

    }
</script>

</body>
</html>

常用指令

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

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

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

vue1.x写法 ——> vue2.x的写法
　　v-html ——> 　　　　{{ }}
　　v-bind:属性名 —-> :属性 表示： 设置属性
　　v-on:事件名 —-> @事件名

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

<div id="app">
    <span v-html="img"></span>
    <p v-html="{{title}}"></p>
    <img v-bind:src="img2" width="50">  <!--1.0版本用  v-bind： 设置属性-->
    <button v-on:click="func">点击</button>  <!-- 点击事件  -->
    <button @click="(num<10)?(num):(num-10)">点击{{num}}</button>  <!-- 点击事件  使用了三元运算符  -->
</div>

<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               img:'<img src="img/1.png" width="100px">' ,// 数据为标签时，在页面展示时需要放在一个标签中显示设置v-html 属性
               title:"hello world",
               num:10
           },
           methods:{
               func:function () {
                   alert("你点我干嘛！");
               }
           }


       })

    }
</script>

</body>
</html>

2. 操作属性

格式：

<标签名 :标签属性=”data属性”></标签名>

<p :title="str1">{{ str1 }}</p>      <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a>       <!-- v-bind是vue1.x版本的写法 -->

3.事件绑定
有两种写法，@事件名 和 v-on:事件名

<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>

  1. 使用@事件名来进行事件的绑定
    语法：

  2. 绑定的事件的事件名，全部都是js的事件名：
    　　@submit —> onsubmit
    　　@focus —> onfocus

  • 案例1 ：

　　- 知识点：

　　　　1. v-model input 框

　　　　2. @click 点击事件

　　　　3. 三元运算符

核心代码:

<button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               num:10
           }

       })

    }
</script>
<div id="app">

    <button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div>

</body>
</html>

4 操作样式

  1. 控制标签class类名

格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组
添加class类名，值是一个对象

<style>
   .box1{color: red;border: 1px solid #000;}
   .box2{background-color: orange;font-size: 32px;}
</style>

<!---直接给标签设置class属性时，用的是  单花括号  -->
    <p :class="{box1:mycls1}">段落一</p>
    <p @click="mycls3=!mycls3" :class="{box2:mycls3,box1:mycls2,}">段落一</p>  

data:{  // data 相当于  model
         mycls1:false, // class属性设置是 bool
         mycls2:true,
         mycls3:true
    }
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
  1. 批量给元素增加多个class样式类
<style>
    .box4{
        background-color: red;
    }
    .box5{
        color: green;
    }
  </style>


<!-- 批量给元素增加多个class样式类 -->
    <style>
    .box6{background-color: red;}
    .box7{color: green;}
    .box8{border: 1px solid yellow;}
    </style>

<div id="app3">
   <p :class="[mycls1,mycls2]">第3段落</p>
</div>
<script>
    let vm3=new Vue({
        el:"#app3",
        data:{

            mycls1:{
                box6:false,
                box7:true
            },
            mycls2:{
               box8:true
            }
        }
    })
</script>
  1. 控制标签style样式
    格式1：值是json对象，对象写在元素的:style属性中
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是对象变量名，对象在data中进行声明

<div v-bind:style="styleObject"></div>

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是数组

<div v-bind:style="[style1, style2]"></div>

data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
       .box1{color: red;border: 1px solid #000;}
        .box2{background-color: orange;font-size: 32px;}
    </style>
</head>
<body>

<!--方式一-->
<div id="box1">
    <p :style="{color:mycolor,backgroundColor:mybg}">第一段内容</p>

</div>

<br>
<script>

    var vm1= new Vue({
        el:"#box1",
        data:{
            mycolor:'red',
            mybg:'pink'
        }
    })

</script>


<!--方式二-->
<div id="box2">
    <p :style="mystyle">第一段内容</p>

</div>

<br>
<script>

    var vm2= new Vue({
        el:"#box2",
        data:{
            mystyle:{
                color:"red",
                backgroundColor:"pink"
            }
        }
    })

</script>


<!--方式三：-->
<div id="box3">
    <div :style="[mystyle,mystyle2]">第一段内容</div>

</div>

<br>
<script>
    var vm3= new Vue({
        el:"#box3",
        data:{
            mystyle:{
                color:"red",
                backgroundColor:"pink"
            },
             mystyle2:{
                height:"400px",
                width:"400px"
            }

        }
    })

</script>

例子
3. 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

  1. v-if
<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data:{
ok:false // true则是显示，false是该标签不会出现，不只是隐藏
}
2 v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

data:{
ok:false // true则是显示，false是隐藏
}
3 v-else-if

<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>

data:{
num:2
}
4 v-show

用法和v-if大致一样，区别在于2点：

1. v-show后面不能v-else
2. v-show隐藏元素时，使用的是display:none来隐藏的，

　　而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

<h1 v-show="ok">Hello!</h1>

data数据：
data:{
ok:false // true则是显示，false是隐藏
案例：


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

</head>
<body>
    <div id="box">
       <p v-if="is_login">欢迎再次登录我们网站</p>
       <p v-else><a href="">注册</a><a href="">登录</a></p>


        <p v-if="num%3==0">这个数能被3整除</p>
        <p v-else-if="num%5==0">这个数能被5整除</p>
        <p v-else-if="num==1">这个数为{{num}}</p>
        <p v-else>你好</p>
        <!--v-show 符合条件就展示 ，不符合条件就隐藏 -->
        <p v-show="num==3">这个数为3</p>
        <p v-show="num">这个数为3</p>
    </div>

</body>

<script>
    var vm =new Vue({
        el:'#box',
        data:{
            // is_login:true,
            is_login:false,
            num:3
        }


    })
</script>
</html>

v-if v-else v-show
5 列表渲染指令
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：

<ul>
<!--i是列表的每一个元素-->
<li v-for="i in list">{{i}}</li>
</ul>
数据是对象：

<ul>
<!--i是每一个value值,j是每一个键名-->
<li v-for="(i, j) in obj1">{{j}}:{{i}}</li>
</ul>
实用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<script>
    // 页面加载完执行
    window.onload=function (ev) {


       let vm = new Vue({
           // 至少两个数据el 和data
           el:'#app', //通过css 选择器   确定vue要控制的范围
           data:{  // data 相当于  model
               num:10
           }

       })

    }
</script>
<div id="app">

    <button @click="num+=1">添加商品</button>
    <input type="text" v-model="num">
    <button @click="(num<=1)?(num=1):(num-=1)">减少商品</button> <!--三元运算 -->
</div>

</body>
</html>

商品增减

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

       span{
           height: 100px;
           width: 100px;
           background: grey;
           display: inline-block;
           line-height: 100px;
           text-align: center;
       }
       .new div{
           width: 320px;
           height: 300px;
           background: red;
           display: none;
       }
       .new .active{
           display: block;
       }
       .current{
           background: red;
       }
   </style>
</head>
<body>
   <div id="box">
       <div class='item'>
           <span :class="num==1?'current':''" @click="num=1">国内新闻</span>
           <span :class="num==2?'current':''" @click="num=2">国外新闻</span>
           <span :class="num==3?'current':''" @click="num=3">银河新闻</span>
       </div>
       <div class="new" >
           <div :class="num==1?'active':''">国内新闻</div>
           <div :class="num==2?'active':''">国外新闻</div>
           <div :class="num==3?'active':''">银河新闻</div>
       </div>
   </div>

</body>

<script>
   var vm =new Vue({
       el:'#box',
       data:{
           num:1
       }


   })
</script>
</html>

内容切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<style>
    .active {
        color: red
    }

    #good_add, #good_edit {
        width: 300px;
        height: 300px;
        border: 1px solid grey;
        background: grey;
        text-align: center;
        /*display: none;*/
    }
    .proform{
        display: block;
    }
    .hide_cls{
        display: none;
    }
    #good_edit div ,#good_add div{
        margin-top: 20px;
    }

</style>
<body>


<div id="box">
    <div class="row">
        <div class="col col-md-3">
            <div id="good_add" :class="{'proform':add_cls1,'hide_cls':add_cls2}">
                <h3>添加商品</h3>
                <div>商品标题&nbsp;&nbsp;&nbsp;<input type="text" v-model="add_name"></div>
                <div>商品数量&nbsp;&nbsp;&nbsp;<input type="text" v-model="add_num"></div>
                <div>商品价格&nbsp;&nbsp;&nbsp;<input type="text" v-model="add_price"></div>
                <div><button class="btn btn-default" @click="add_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default " @click="add_cancel" style="margin-left: 20px">取消</button></div>

            </div>
        </div>

        <div class="col col-md-6 ">
            <button class="btn btn-info" @click="add">添加</button>

            <table class="table table-bordered">
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tbody>
                <tr v-for="good,key in goods">
                    <td>{{key+1}}</td>
                    <td>{{good.name}}</td>
                    <td v-if="good.price>100" :class="{active:mycls}">{{good.price}}</td>
                    <td v-if="good.price<=100">{{good.price}}</td>
                    <td>{{good.num}}</td>
                    <td>
                        <button class="btn btn-info" @click="edit(key)">编辑</button>
                        <button class="btn btn-danger" @click="goods.splice(key,1)">删除</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <div class="col col-md-3 pull-right">
            <div id="good_edit" :class="{'proform':edit_cls1,'hide_cls':edit_cls2}" >
            <!--<div>编号<input type="text" v-model="k"></div>-->
            <h3>编辑商品</h3>
            <div>商品标题&nbsp;&nbsp;&nbsp;<input type="text" v-model="name"></div>
            <div>商品数量&nbsp;&nbsp;&nbsp;<input type="text" v-model="num"></div>
            <div>商品价格&nbsp;&nbsp;&nbsp;<input type="text" v-model="price"></div>
            <div><button class="btn btn-default" @click="edit_keep" style="margin-right: 20px">保存</button ><button class="btn btn-default" @click="edit_cancel" style="margin-left: 20px">取消</button></div>

        </div>
        </div>


    </div>
</div>


<script>
    let l = new Vue({

        el: "#box",
        data: {
            goods: [
                {'name': "python1", 'price': 150,"num":1000},
                {'name': "python2", 'price': 100,"num":2000},
                {'name': "python3", 'price': 70,"num":3000},
                {'name': "python4", 'price': 60,"num":4000},
                {'name': "python5", 'price': 110,"num":5000}
            ],
            //编辑所用的值
            k:"",// 记录该书的索引值，方便编辑后保存用
            name:"", //点击编辑时，把该书的开始name显示 ，之后修改后同步改变，下面的价格和数量也是一样
            price:"",
            num:"",
            edit_init_dic:"",// 点击编辑时，记录最初 的书籍信息
            // edit_init_k:"",//点击编辑时，记录该书最初索引值  可以不用

            edit_cls1: false,
            edit_cls2: true,

            //添加用的参数
            add_name:"",
            add_price:"",
            add_num:"",
            add_cls1:false,
            add_cls2:true,
            mycls:true


        },
         methods:{
                edit:function (key) {
                    //显示编辑框
                     this.edit_cls1=true;
                     this.edit_cls2=false;
                    //数据处理
                    this.k=key;
                    this.name=this.goods[key].name;
                    this.price=this.goods[key].price;
                    this.num=this.goods[key].num;
                    this.edit_init_dic={"name":this.goods[key].name,"price":this.goods[key].price,"num":this.goods[key].num};
                    this.edit_init_k=key
                },
                edit_keep:function () {
                    this.goods.splice(this.k,1,{"name":this.name,"price":this.price,'num':this.num})
                    this.edit_cls1=false;
                    this.edit_cls2=true;
                },
                edit_cancel:function () {
                    this.goods.splice(this.k,1,this.edit_init_dic);
                    this.edit_cls1=false;
                    this.edit_cls2=true;
                },
                add:function () {
                    //点击添加按钮弹出 添加框  //:class="{'proform':add_cls1,'hide_cls':add_cls2}
                    this.add_cls1=true;
                    this.add_cls2=false;

                    //将上次的数据清空显示
                    this.add_name="";
                    this.add_price="";
                    this.add_num="";

                },
                add_keep:function () {
                    //保存数据
                    this.goods.splice(this.goods.length,1,{'name':this.add_name,'price':this.add_price,'num':this.add_num});
                    //隐藏 添加框
                    this.add_cls1=false;
                    this.add_cls2=true;

                },
                add_cancel:function () {
                    //把数据清空
                    this.add_name="";
                    this.add_price="";
                    this.add_num="";
                    //隐藏 添加框
                    this.add_cls1=false;
                    this.add_cls2=true;

                }

            }
    })
</script>

</body>
</html>

表格的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        table,tr,th,td{
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }
        table{
            width: 600px;
            margin-left: 100px;
        }
        th{
            padding-top: 10px;
        }
        .box{
            width: 300px;
            height: 200px;
            border: 1px solid;
            border-radius: 5px;
            position: fixed;
            margin: auto;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }
        .box div{
            text-align: center;
            margin: 15px;
        }
        .box button{
            margin: 20px;
        }
        table button{
            margin-left: 10px;
        }
    </style>
</head>
<div id="app">
    <body>
    <div><button @click="is_show=true">添加商品</button></div>
    <table>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>操作</th>
        </tr>
        <tbody>
            <tr v-for="good,key in goods">
                <td>{{key+1}}</td>
                <td>{{good.name}}</td>
                <td>{{good.price}}</td>
                <td>{{good.num}}</td>
                <td><button @click="edit(key)">编辑</button><button @click="del(key)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <div class="box" v-show="is_show">
        <div>商品名称：<input type="text" v-model="name"></div>
        <div>商品价格：<input type="text" v-model="price"></div>
        <div>商品数量：<input type="text" v-model="num"></div>

        <div><button @click="keep" >保存</button><button @click="cancel">取消</button></div>
    </div>

    </body>
</div>


<script>
    var vm = new Vue({

        el:"#app",

        data:{
            edit_key:'',
            name:'',
            price:'',
            num:'',
            is_show:false,
            goods: [
                {'name': "python1", 'price': 150,"num":1000},
                {'name': "python2", 'price': 100,"num":2000},
                {'name': "python3", 'price': 70,"num":3000},
                {'name': "python4", 'price': 60,"num":4000},
                {'name': "python5", 'price': 110,"num":5000}]
        },
        methods:{
            //删除
            del:function (key) {
                this.goods.splice(key,1);

            },
            // 保存
            keep:function () {
                // box 隐藏
                this.is_show=false;
                 // 数据追加到后面
                if (this.edit_key){
                    //编辑时保存
                    this.goods[this.edit_key].name=this.name;
                    this.goods[this.edit_key].price=this.price;
                    this.goods[this.edit_key].num=this.num;

                }else {
                     this.goods.push({"name":this.name,"price":this.price,"num":this.num});
                }
                //清空 数据
                this.name="";
                this.price="";
                this.num="";
                this.edit_key='';
            },
            cancel:function () {
                //添加时取消
                 this.is_show=false;
                  //清空 数据
                this.name="";
                this.price="";
                this.num="";
                this.edit_key='';

            },
            //编辑
            edit:function (key) {
                //显示box
                this.edit_key=key;
                this.is_show=true;
                //将数据显示
                this.name=this.goods[key].name;
                this.price=this.goods[key].price;
                this.num=this.goods[key].num;

            }

        }
    })

</script>
</html>
#
关注我

链接

分类

最新文章

归档

标签

Aplayer1
Apple1
CI1
Fiddler1
Firefox1
Flink1
Hexo1
Homebrew1
IntelliJ IDEA1
JAVA4
JS1
JVM2
Java7
Linux1
MVVM1
Mac9
Maven2
Movie1
Node.js2
OpenCV1
PWA1
Python5
Rust1
Rx.js1
ShadowSocks1
Shadowsocks1
TCP1
TeamCity1
Toss Note1
VPS1
VSCode1
Vue1
Vue.js3
Vultr1
Web3
WebAssembly1
bug1
butterfly2
cdn1
centOS2
data analysis1
docker1
flask1
games1
git2
github1
go1
gradle1
gulp1
hexo1
java1
javascript6
jsdelivr1
linux4
live2d1
nginx1
pandas1
react1
redis1
rust1
serverless1
shell2
ssh2
terminal2
turtle绘图1
viola1
windows2
windows111
主題1
前端构建1
前端框架1
前端监控1
化学1
学习方法1
开发工具2
性能优化2
持续集成1
插件1
教程7
测试1
物理学2
电脑1
科幻历险记1
笔记1
系统1
组件化1
终端2
网易云1
网络安全1
跨端融合1