vue 基础

Posted knighterrant

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 基础相关的知识,希望对你有一定的参考价值。

一 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里面对应数据的值也会随之发生改变,甚至,页面中凡是使用了这个数据都会发生变化。

3. 双花括号仅用输出文本内容,如果要输出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>

 

4.在输出内容到普通标签的使用{{ }}还支持js代码。

  <h1>{{str1.split("").reverse().join("")}}</h1>

 

5. 支持js的运算符
  <h1>{{num1+3}}</h1>

 

6.三元运算符,类似于python里面的三元表达式
  三元运算符的语法:
    判断条件 ? 条件为true : 条件为false的结果

    <h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>

  python 三元表达式[三目运算符]的语法:
    a if 条件 else b
7 .图片标签

<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. 使用@事件名来进行事件的绑定
语法:
<h1 @click="num++">{{num}}</h1>

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,
}

2. 一个属性间的来回切换

  <style>
    .box4{
        background-color: red;
    }
    .box5{
        color: green;
    }
    </style>
<div id="app2">
    <!---通过点击事件来回的切换样式 ->
    <!---给某个标签来回切换样式     点击事件,对样式进行取反 ,再给某个标签设置该样式就可以来回切换该样式 -->
    <button @click="mycls.box5=!mycls.box5">改变背景</button>
    <button @click="mycls.box4=!mycls.box4">改变字体颜色</button>   <!--mycls3=!mycls3 表示取反 ,用于来回在该属性之间进行切换-->
    <p :class="mycls">你好啊</p>
</div>
<script>
    let vm2=new Vue({
        el:"#app2",
        data:{

            mycls:{
                box4:false,
                box5:true
            }
        }
    })
</script>

 3. 批量给元素增加多个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>

 2  控制标签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>
表格的增删改查

 

以上是关于vue 基础的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板