Vue.js入门

最新推荐文章于 2024-01-04 19:20:32 发布

二狗doggy

最新推荐文章于 2024-01-04 19:20:32 发布

阅读量96

点赞数

分类专栏： Vue.js基础文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45065272/article/details/102553407

版权

Vue.js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简单的Vue使用：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link href="./style.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <P>name:{{name}}</P>
        <p>age:{{age}}</p>
    </div>
    <script src="./app.js"></script>
</body>

</html>

var vm = new Vue({  //vm对象即MVVM中的VM调度者
    el: '#app',  //element，表示要控制的元素
    data: {  //存放el中要用到的数据
        name: 'doggy',  //通过Vue提供的指令，不用手动操作DOM元素，就可将数据渲染于页面
        age: '18'
    }
})

v-cloak，v-text，v-html：

    <div id='app'>  <!--网速慢时可能闪烁-->
        <p v-cloak>1111{{msg}}0000</p>  <!--插值表达式只替换自己的占位符-->
        <p v-text='msg'>11110000</p>  <!--默认v-text无闪烁，会覆盖元素中原本的内容-->
        <p v-html='msg'>1010</p>  <!--将msg作为HTML表达式，覆盖元素原本的内容-->
    </div>

[v-cloak] {  /*解决闪烁问题*/
    display: none;
}

var vm = new Vue({
    el: '#app',
    data: {
        msg: '<h1>hello world</h1>'
    }
});

效果图
v-bind：

<p v-bind:title='myTitle+"可选表达式"'>0000</p>  <!--v-bind用于绑定属性，可简写为:-->

var vm = new Vue({
    el: '#app',
    data: {
        myTitle: 'This is a title'
    }
});

v-on：

    <div id='app'>
        <button v-on:click='display'>click</button>  <!--v-on用来绑定事件，可简写为@-->
    </div>

var vm = new Vue({
    el: '#app',
    methods: {  //定义当前Vue实例可用的方法
        display: function () {
            alert("hello world");
        }
    }
});

事件函数名()，带()则可传递参数

补充实例：

	<div id='app'>
        <button @click='start'>start</button>
        <button @click='stop'>stop</button><br />
        {{msg}}
    </div>

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'よろしくお願いします',
        intervalNum: null
    },
    methods: {
        start() {  //start(){}相当于start:function(){}
            if (this.intervalNum != null) {  //避免定时器重复开启
                return;
            }
            this.intervalNum = setInterval(() => {  //箭头函数内部this和外部保持一致，this -> vm
                var head = this.msg.substring(0, 1);
                var rear = this.msg.substring(1);
                this.msg = rear + head;
            }, 500);
        },
        stop() {
            clearInterval(this.intervalNum);
            this.intervalNum = null;
        }
    }
});

v-model：

<!--v-model可以实现数据的双向绑定-->
<!--v-model只能运用在表单元素中，如input(radio，text，address，email)，select，checkbox，textarea-->

使用示例：

<input type="text" v-model='msg'>

v-for&key：

	<div id='app'>
        <!--v-for用于循环，创建多个元素-->
        <p v-for='(item, i) in list'>索引：{{i}}---项目：{{item}}</p>
        <!--v-for迭代数字，值从1开始-->
        <p v-for='count in 6'>第{{count}}次迭代</p>
        <!--v-for循环时，key只能使用Number或String，key用来指定元素-->
        <p v-for='item in menu' :key='item.id'>
            <input type="checkbox" />{{item.id}}---{{item.name}}
        </p>
    </div>

	el: '#app',
    data: {
        list: ['寿司', 'ラーメン', 'すき焼き'],
        menu: [{
                id: 1,
                name: 'バナナ'
            },
            {
                id: 2,
                name: 'リンゴ'
            },
            {
                id: 3,
                name: 'ミカン'
            }
        ]
    }

v-for循环遍历对象键值对：

<p v-for='(val, key, i) in person'>值：{{val}}--键：{{key}}--索引：{{i}}</p>

person: {
	id: 1,
	name: 'doggy',
	age: 18
}

效果图

v-if&&v-show：

        <!--v-if每次会重新删除或创建元素-->
        <p v-if='flag'>This is v-if.</p>
        <!--v-show只切换display:none样式-->
        <p v-show='flag'>This is v-show.</p>

二狗doggy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门

简单的Vue使用：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link href="./style.css" rel="stylesheet" /> <scrip...
复制链接

扫一扫

专栏目录