Vue learning(入门)第一弹

Vue 2020-01-14 47 次浏览 次点赞

vue.js导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

html代码块

<div id="myApp">
        {{ message }}
</div>

javascript脚本部分(对html代码块的一个功能性的明述)

<script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                message: 'Hello Vue.js World!'
            }
        })
</script>

v-if

条件判断式,根据表达式的真伪进行页面处理

<!-- Virtual DOM 虚拟的,若为假则直接不加载在页面中DOM(服务端渲染)-->
<div v-if="seen">2017最新发卖</div>

v-for

处理数组循环,将数据循环显示到页面时

<div id="myApp">
        <h3>游戏列表</h3>
        <!-- Virtual DOM -->
        <div v-if="seen">2017最新发卖</div>
        <ol>
            <li v-for="game in games">{{ game.title }} / {{ game.price }}元</li>
        </ol>
</div>


    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                seen: true,
                games: [{
                        title: '勇者斗恶龙',
                        price: 400
                    },
                    {
                        title: '超级马里奥',
                        price: 380
                    },
                    {
                        title: '我的世界',
                        price: 99
                    }
                ],
            }
        })
    </script>

v-model

为页面输入框进行数据绑定(绑定一个模型一个变量,让变量自动反应用户输入的内容),例如:

input
select
textarea
components(组件)
<div id="myApp">
        <p>你最喜欢的游戏是:{{ mygame }}</p>
        <input v-model = "mygame">
</div>
    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                mygame: '超级马里奥'
            }
        })
    </script>

![](D:Desktop绑定.png)

按钮事件

v-on

为页面元素绑定各种事件:keydown, keyup, click, dbclick, load, etd
<div id="myApp">
        <p>你最喜欢的游戏是:{{ mygame }}</p>
        <input v-model = "mygame">
        <button v-on:click = "btnClick('我的世界')">我的世界</button>
        <button v-on:click = "btnClick('勇者斗恶龙')">勇者斗恶龙</button>
        <button v-on:click = "btnClick('塞尔达传说')">塞尔达传说</button>
        <button @click = "btnClick('魔界战记')">魔界战记</button>
</div>

    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                mygame: '超级马里奥',
            },
            methods: {
                btnClick: function(pname) {
                    this.mygame = pname;
                }
            },

        })
    </script>

![](D:Desktop按钮事件.png)

组件(一个页面,好多的组件好多小的功能区域块组成的)

component

定义页面的局部区域块,完成单独的页面小功能。示例:
<div id="myApp">
        <ol>
            <game-item v-for="item in games" v-bind:game="item"></game-item>
        </ol>
</div>
<script>
    /*组件定义:game-item 定义了一个html标签,拓展了标准的html语言 */
        Vue.component('game-item', {
            props: ['game'],
            template: '<li>{{ game.title }}</li>'
        });
    
        var myApp = new Vue({
            el: '#myApp',
            data: {
                games: [{
                        title: '勇者斗恶龙',
                        price: 400
                    },
                    {
                        title: '超级马里奥',
                        price: 380
                    },
                    {
                        title: '我的世界',
                        price: 99
                    }
                ],
            },
        })
    </script>
标签中穿了一个 props: ['game']属性,v-bind:game绑定上game属性
game-item标签还被定义了一个模板,这个非标准的html标签在网页渲染时应该渲染成模板中所显示的内容(template里面的内容)即: <li>{{ game.title }}</li>

![](D:Desktop组件.png)

过滤器

filters

格式化变量内容的输出。(日期格式化,字母大小写,数字再计算等)
<div id="myApp">
        <p>{{ message }}</p>
        <p>{{ message | toupper }}</p>
        <hr>
        <p>现在的vue.js学习进度是{{ num }} ({{ num | topercenter }})</p>
    </div>

    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                message: 'hello vue.js world!',
                num: 0.3
            },
            filters: {
                toupper: function(value) {
                    return value.toUpperCase();
                },
                topercenter: function(value) {
                    return value * 100 + '%';
                }
            },
        })
    </script>

![](D:Desktopfilters.png)

计算属性

computed

处理元数据(从数据库中取出的数据),便于进行二次利用(比如:消费税自动计算功能)
<div id="myApp">
        原价格:{{ price }}含税价:{{ priceInTax }}折合人民币{{ priceChinaRMB }}
</div>

    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                price: 2998
            },
            computed: {
                priceInTax: function() {
                    return this.price * 0.8;
                },
                priceChinaRMB: function() {
                    return Math.round(this.priceInTax / 16.75);
                }
            },
        })
    </script>

![](D:Desktop计算属性.png)

观察属性

$watch

与computed属性类似,用于观察变量的变化。然后进行相应的处理。
<div id="myApp">
        原价格:{{ price }}含税价:{{ priceInTax }}折合人民币{{ priceChinaRMB }}
        <hr>
        <button @click = "btnClick(1000)">加价1000</button>
    </div>

    <script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                price: 0,
                priceInTax: 0,
                priceChinaRMB: 0,
            },
            watch: {
                price: function(newVal, oldVal) {
                    console.log(newVal, oldVal);
                    this.priceInTax = Math.round(this.price * 1.08);
                    this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
                },
            },
            methods: {
                btnClick: function(newPrice) {
                    this.price += newPrice;
                },
            },
        });
    </script>
与计算属性区分:计算属性中priceInTax、priceChinaRMB是与methods类似的两个个方法,而在观察属性中作为整个vue实例中的两个成员的一个属性(在计算属性作为计算属性,在watch的实现方式里需定义成data的属性)
实现:
watch: {
          price: function(newVal, oldVal) {
              console.log(newVal, oldVal);
              this.priceInTax = Math.round(this.price * 1.08);
              this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
          },
watch盯住price变量,当price发生变化时调用函数:变量名price需与属性名一致

![](D:Desktop观察属性前.png)

![](D:Desktop观察属性加价后.png)

注意到,初始化的时候,含税价与人民币都为0,在进行一次加价后,含税价与人民币才变化,与代码实现逻辑一致,要解决含税价与人民币初始价格为:在实例化完对象后再进行赋值操作
<script>
        var myApp = new Vue({
            el: '#myApp',
            data: {
                price: 0,
                priceInTax: 0,
                priceChinaRMB: 0,
            },
            watch: {
                price: function(newVal, oldVal) {
                    console.log(newVal, oldVal);
                    this.priceInTax = Math.round(this.price * 1.08);
                    this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
                },
            },
            methods: {
                btnClick: function(newPrice) {
                    this.price += newPrice;
                },
            },
        });
        myApp.price = 2998;
    </script>

![](D:Desktop观察属性更改后.png)

Vue入门系列说明:本系列仅仅是作为Vue入门教学视频学习的归纳总结,在此感谢小马视频ORYouTube地址


本文由 fmujie 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

召唤看板娘