vue框架（小清单）

ES6的常用语法：

变量的定义：

他的结果:相当于

模板字符串：

数据的解构：

函数：

this：

结果 this取决于函数的最近调用者。

类：

类的继承：

ES6的常用指令：

v-html，v-text：

v-for：

v-if：

v-show：

v-bind：

v-on：

button的绑定事件还可以这样写：

<button v-on="{click:show,mouseenter:enter,mouseleave:leave}">点我显示</button>

这里有一个小的demo：

demo二：

v-model：

也可以是select标签：

也可以是textarea标签。

指令修饰符：

<pre>{{name}}</pre>    #  可以原样输出   比如空格

v-model.lazy.trim="name"    # 可以删掉空格

v-model.number = ‘phone’     #  可以将输入的数字字符串变成数字。

计算属性：（支持一些简单的计算）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
            <tr>
                <th>学科</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>python</td>
                <td><input type="text" v-model.number="python"></td>
            </tr>
            <tr>
                <td>前端</td>
                <td><input type="text" v-model.number="web"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{avg}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            python:'',
            web:''
        },
        computed:{
            sum:function () {
                return this.python + this.web
            },
            avg:function () {
                return this.sum/2
            }
        }
    })
</script>
</body>
</html>

自定义指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <style>
        .box{
             200px;
            height: 200px;
            border: solid 1px red;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" v-yang.left.bottom="fix">
    </div>
</div>
<script>
    Vue.directive('yang',function (el, bindding) {
        console.log(el);
        console.log(bindding);
        console.log(bindding.modifiers);
        let positions = bindding.modifiers;
        if(bindding.value){
            el.style.position = 'fixed';
            for(let key in positions){
                el.style[key] = 0;
            }
        }else{
            el.style.position = 'static'
        }
    });
    const app = new Vue({
        el:'#app',
        data:{
            fix:true
        },
    })
</script>
</body>
</html>

获取DOM：

这里有一个demo：小清单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      .text {
        font-size: 14px;
      }
    
      .item {
        margin-bottom: 18px;
      }
    
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
      .box-card {
         480px;
      }
        .line{
            text-decoration: line-through;
        }
</style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>小清单</span>
              <input type="text" v-model="current">
            <el-button style="float: right; padding: 3px 0" type="text" @click="my_click">添加</el-button>
          </div>
          <div v-for="(item,index) in dolist" :key="index" class="text item" @click="my_line">
              <el-alert :class="{line:active}"  :title="item" type="success" show-icon @close="my_close"></el-alert>
          </div>
    </el-card>
    {{dolist}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            current:'',
            dolist:[],
            active:false,
        },
        methods:{
            my_click:function () {
                //this.dolist.push(this.current)//  添加在后面
                this.dolist.unshift(this.current)//  添加在前面
            },
            my_close:function () {

            },
            my_line:function () {
                this.active = !this.active
            }

        }
    })
</script>
</body>
</html>

vue框架 （小清单）

vue框架（小清单）