Vue.js -- 渐进式JavaScript框架（1）

最新推荐文章于 2024-08-14 18:19:46 发布

Lazy_Life

最新推荐文章于 2024-08-14 18:19:46 发布

阅读量1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/Lazy_Life/article/details/81280787

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.Vue.js 是什么：

Vue 是一套用于构建用户界面的渐进式框架（由易到难），也能够完成复杂的单页面应用；

2.Vue.js 的安装使用：

（1）使用 bower 下载安装 vue；

（2）进行导入（路径在 vue 中的 dist 文件夹中）

3.Vue.js 的指令（部分）：

<body>
    <div id="view">             //控制器
        //1.实时数据绑定（v-model）
        <h1>{{text}}</h1>
        <input type="text" v-model="text">

        //2.事件（两种写法），写在非让发层（方法的括号可加可不加）
        <button v-on:click="show()">点我试试</button>
        <button @click="show">再点我试试</button>
        <input type="text" @input="inputShow()">

        //3.循环（v-for）
        <ul>
            <li v-for="val in arr">{{val}}</li>
        </ul>
        <ul>
            <li v-for="(val,key) in arr">{{'第' + (key+1) + '位是' + '：' + val}}</li>
        </ul>

        //4.文本替换和标签替换
        <p v-text="myHtml">文本替换</p>
        <p v-html="myHtml">标签替换</p>

        //5.显示和隐藏（v-show）
        <h3 v-show="flag">这是显示</h3>
        <h3 v-show="!flag">这是隐藏</h3>

        //6.超链接
        <a v-bind:href="url">去百度</a>
        <a :href="url">再去百度</a>

        //7.判断（v-if）
        <p v-if="answer == 0">答案是0</p>
        <p v-else-if="answer == 10">答案是10</p>
        <p v-else-if="answer == 20">答案是20</p>

    </div>
//导入vue
    <script type="text/javascript" src="路径"></script>
//写入vue.js代码
    <script>
        var app = new Vue({                
            el : "#view",                    //控制器
            data : {                         //数据层
                text : "",
                arr : [100,200,300],
                myHtml : "<h1>这是Vue，hello Vue</h1>",
                flag : true,
                url : "http://www.baidu.com",
                answer : 20,
            },
            methods : {                     //方法层
                show : function(){
                    alert("hello vue")
                },
                inputShow : function(){
                    console.log(event.target.value);
                }
            }
        })
    </script>
</body>

4.Vue.js 的自定义指令：

<body>
    <div id="module">
        //1.点击button使p标签的背景颜色随机改变
        <button v-on:click="show()">点我</button>
        <p v-if="flag" v-change>主要用来显示数据</p>

        //2.点击button使h3标签的内容进行修改
        <button @click="btn()">再点我试试</button>
        <h3 v-test="count" v-if="count<5">这是一段文本{{count}}</h3>
    </div>
</body>
<script>
    //封装背景颜色的改变的函数
    function ranColor(){
        var R = Math.floor(Math.random()*255);
        var G = Math.floor(Math.random()*255);
        var B = Math.floor(Math.random()*255);
        //将获取到的数值转换成十六进制
        var r_16 = R.toString(16);
        var g_16 = G.toString(16);
        var b_16 = B.toString(16);
        return '#' + r_16 + g_16 + b_16;       
    }
    
    new Vue({
        el : '#module',
        data : {                  //数据层
            flag : true,
            count : 0,
        },
        methods : {               //方法层
            show : function(){
                this.flag = !this.flag;
                console.log(this)             //输出vue这个最大的对象
                console.log(this.flag)        //输出所写的数据
            },
            btn : function(){
                this.count ++;
            }
        },
        //开始自定义指令
        directives : {

            change : {                //指令名随便定义
                bind : function(el,bindings){             //参数名字随便定义
                    console.log(el);              //代表这个标签
                    console.log(bindings);        //代表这个指令
                    console.log('指令被调用了');
                    el.style.backgroundColor = ranColor();
                },
                unbind : function(){
                    console.log('指令被解除了')
                }
            },
            test : {
                bind : function(els,binding){
                    console.log('该指令被调用');
                },
                update : function(els,binding){
                    console.log('该指令正在被更新');
                    console.log(binding.value)           //输出count的值
                },
                unbind : function(){
                    console.log('该指令被解除')
                }
            },

        }
    })
</script>

5.Vue.js 自定义过滤器（同 Angular 中相似）：

<body>
    <div id="module">
        <h3>{{price | currency('$')}}</h3>         //输出 $30
        <h2>{{str | preas}}</h2>                   //输出Hello world
    </div>
    <script>
        new Vue(){
            el : "#module",
            data : {
                price : 30,
                str : 'hello world',
            },
            //自定义过滤器
            filters : {
                currency : function(value,arg){          //第二个参数就是过滤器括号中的值  
                    console.log(value)       //30
                    return arg + value
                },
                preas : function(value1,arg1){
                    console.log(value1)     //hello world
                    return value1[0].toUpperCase() + value1.slice(1)       //让首字母大写
                }
            }
        }
    </script>
</body>