Vue learning(入门)第一弹

最新推荐文章于 2024-04-28 11:28:52 发布

fmujie

最新推荐文章于 2024-04-28 11:28:52 发布

阅读量161

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44396894/article/details/104046528

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

个人博客：https://blog.fmujie.cn/

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPCdDr1l-1579448851147)(D:\Desktop\绑定.png)]]1

按钮事件

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JhFdD0Kq-1579448851150)(D:\Desktop\按钮事件.png)]]2

组件（一个页面，好多的组件好多小的功能区域块组成的）

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里面的内容）即：
{{ game.title }}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXcR8iuG-1579448851152)(D:\Desktop\组件.png)]]3

过滤器

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePVtzC7P-1579448851154)(D:\Desktop\filters.png)]]4

计算属性

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NlwvWK8P-1579448851155)(D:\Desktop\计算属性.png)]]5

观察属性

$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需与属性名一致

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKvo9CpG-1579448851156)(D:\Desktop\观察属性前.png)]]6

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3SPwaHDH-1579448851157)(D:\Desktop\观察属性加价后.png)]]7

注意到，初始化的时候，含税价与人民币都为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>