zoukankan      html  css  js  c++  java
  • Vue模板语法(一)

    Vue简介

    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用

    Vue的模板语法:

    插值案例:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>vue的插值案例</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        </head>
    
        <body>
            <div id="app">
                <ul>
                    <li>
                        <h3>文本</h3> 
                        {{msg}}
                    </li>
                    <li>
                        <h3>html标签字符串渲染</h3>
                        <div v-html="htmlStr"></div>
                    </li>
                    <li>
                        <h3>v-bind属性绑定指令</h3>
                        <input type="text" value="22" />
                        <input type="text" v-bind:value="age" />
                    </li>
                    <li>
                        <h3>表达式</h3>
                        {{str.substr(0,6).toUpperCase()}}
                        {{ number + 1 }}
                        {{ ok ? 'YES' : 'NO' }}
                    <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
                    </li>
                </ul>
            </div>
        </body>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    msg: 'hello vue!',
                    htmlStr: '<span style="color: red;">红了</span>',
                    age:23,
                    str:'https://www.baidu.com',
                    number:6,
                    ok:'true',
                    id:16
                }
            })
        </script>
    
    </html>

    效果如下:

    指令:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>vue的指令案例</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        </head>
    
        <body>
            <div id="app">
                <ul>
                    <li>
                        <h3>分支</h3>
                        <div v-if="score > 90 ">A</div>
                        <div v-else-if="score > 80">B</div>
                        <div v-else-if="score > 70">C</div>
                        <div v-else-if="score > 60">D</div>
                        <div v-else="score > 50">E</div>
                        <input type="text" v-model="score" />
                    </li>
                    <li>
                        <h3>v-show指令</h3>
                        <div v-show="flag">出来吧1</div>
                        <!--
                            分清楚v-if跟v-show的区别
                            v-if:控制的是标签是否打印
                            v-show:控制的是标签的样式
                        -->
                        <div style="color: red;" v-if="flag">出来吧2</div>
                    </li>
                    <li>
                        <h3>v-for指令</h3>
                        <div v-for="itme,index in data1">
                            {{itme}}-{{index}}<br />
                        </div>
                        <hr />
                        <div v-for="itme,index in data2">
                            {{itme.id}}-{{itme.name}}-{{index}}<br />
                        </div>
                    </li>
                    <li>
                        <h3>动态事件调用</h3>
                        <button v-on:{evname}="mya">动态事件调用</button>
                        <input type="text" v-model="evname" />
                    </li>
                </ul>
            </div>
        </body>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    score: 88,
                    flag: true,
                    data1: [1, 3, 5, 6, 8],
                    data2: [{
                        id: 1,
                        name: '篮球'
                    }, {
                        id: 2,
                        name: '唱歌'
                    }, {
                        id: 1,
                        name: 'rap'
                    }],
                    evname:'click'
                },
                methods:{
                    mya(){
                        console.log("方法被调用")
                    }
                }
            })
        </script>
    
    </html>

    效果如下:

    过滤器:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>vue的过滤器案例</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        </head>
    
        <body>
            <div id="app">
                <ul>
                    <li>
                        <h3>局部过滤的注册</h3> 
                        {{msg}}<br />
                        {{msg|a}}<br />
                        {{javaxl|a}}
                    </li>
                    <li>
                        <h3>局部过滤的串联</h3> 
                        {{javaxl|a|b}}
                        
                    </li>
                    <li>
                        <h3>全局过滤的注册</h3> 
                        {{javaxl|c}}
                    </li>
                </ul>
            </div>
        </body>
        <script type="text/javascript">
            Vue.filter('c',function(v){
                console.log(v);
                return v.substring(10,16);
            })
            new Vue({
                el: "#app",
                data: {
                    msg: 'https://www.baidu.com',
                    javaxl:'https://www.jaxal.com',
                },
                filters:{
                    //a是过滤器的名字,后面的函数是过滤器的作用
                    'a':function(v){
                        console.log(v);
                        return v.substring(0,16);
                    },
                    'b':function(v){
                        console.log(v);
                        return v.substring(5,10);
                    }
                }
            })
        </script>
    
    </html>

    效果如下:

    计算及监听属性:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>vue的计算监听属性案例</title>
            <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        </head>
    
        <body>
            <div id="app">
                <ul>
                    <li>
                        <h3>计算属性</h3>
                        单价:<input v-model="price" />
                        数量:<input v-model="num" />
                        总价:{{total}}
                    </li>
                    <li>
                        <li>监听属性</li>
                        km:<input v-model="km" />
                        m:<input v-model="m" />
                    </li>
                </ul>
            </div>
        </body>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    price:16,
                    num:1,
                    km:1,
                    m:1000
                    
                },
                computed:{
                    total(){
                        return parseInt(this.price)*parseInt(this.num);
                    }
                },
                watch:{
                    km(v){
                        this.m=v*1000
                    },
                    km(v){
                        this.m=v/1000
                    }
                }
            })
        </script>
    
    </html>

    效果如下:

    模板语法上集

  • 相关阅读:
    【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 15—Anomaly Detection异常检测
    【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 14—Dimensionality Reduction 降维
    【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 13—Clustering 聚类
    【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 12—Support Vector Machines 支持向量机
    【原】机器学习公开课 目录(课程笔记、测验习题答案、编程作业源码)...持续更新...
    【原】Coursera—Andrew Ng机器学习—Week 11 习题—Photo OCR
    【原】Coursera—Andrew Ng机器学习—Week 10 习题—大规模机器学习
    【原】Coursera—Andrew Ng机器学习—Week 9 习题—异常检测
    【原】Coursera—Andrew Ng机器学习—Week 8 习题—聚类 和 降维
    【原】Coursera—Andrew Ng机器学习—Week 7 习题—支持向量机SVM
  • 原文地址:https://www.cnblogs.com/huxiaocong/p/11389555.html
Copyright © 2011-2022 走看看