一 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="data: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:事件名

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>

表格的增删改查

<!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>

表格增删查改优化版

vue 基础（一）的更多相关文章

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
Vue基础以及指令
Vue 基础篇一一.Vue框架介绍之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
2-5 vue基础语法
一.vue基础语法语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

MongoDB 创建索引及其他
索引以提升查询速度测试:插入十万条数据到数据库中 for(i=0;i<100000;i++){db.t255.insert({name:'test'+i,age:i})} db.t1.fin ...
CodeChef - ELHIDARR Find an element in hidden array（互动题）题解
题意:有一串不递减的串,串中的任意元素都有k个,除了一个元素,他只有1 <= n < k-1个,你现在能向oj做出以下操作: 输出:1 pos,oj会返回pos位置的元素值输出:2 va ...
FAQ Flyway
https://flywaydb.org/documentation/faq What is the best strategy for dealing with hot fixes? You hav ...
OpenWRT路由器使用ipv6拨号上网教程
文章来源于群友,如有侵权,请联系我(aha971030@gmail.com)删除原理介绍分析: 湖北E信地区可以使用ipv6拨号,好处是网络是上下对等不限速网络,也就是说,你的端口上限是多少,网上就 ...
P2163 [SHOI2007]园丁的烦恼（cdq分治）
思路其实是cdq的板子题目要求询问对于每个给出的xi,yi,xj,yj形如xi<=x<=xj.yi<=y<=yj的x,y对数有多少组改成四个询问,拆成四个前缀和的形式后就 ...
文件IO（2）
Lseek: *************************************************************************** 实验一: ...
Google advertiser api开发概述——最佳做法&建议
最佳做法本指南介绍了一些最佳做法,您可以运用它们来优化 AdWords API 应用的效率和性能. 日常维护为确保您的应用不间断运行,可采取以下做法: 确保 AdWords API 中心中的开发者 ...
[转载]grep查看上下文及简单正则表达式
转载自:https://www.cnblogs.com/mfryf/p/3336288.html inux grep 显示前后几行的信息2016年03月02日 14:10:58 ChenHui246 ...
BZOJ 1064: [Noi2008]假面舞会（dfs + 图论好题！）
http://www.lydsy.com/JudgeOnline/problem.php?id=1064 题意: 思路: 考虑以下几种情况: ①无环并且是树: 无环的话就是树结构了,树结构的话想一下就 ...
JS相关重点知识 (概况)
1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的. 2.当从外部引入js文件时,该外部文件里面可以有多个方法, html页面中的oncl ...

vue 基础（一）