vue style动态绑定样式_麻雀虽小五脏俱全的Vue入门案例

最新推荐文章于 2024-05-13 10:27:48 发布

weixin_39953356

最新推荐文章于 2024-05-13 10:27:48 发布

阅读量227

点赞数

文章标签： vue style动态绑定样式

v2-33c50deeaae5f1688b5fa7f921c7b058_1440w.jpg?source=172ae18b

很多学习vue的同学ES6、CSS等的基础还不是很好，上来就直接通过 vue-cli提供的脚手架来创建webpack + Vue 项目，这样子是很不利于理解框架原理的，本文通过一个简单的html带大家入门vue，给你一个通透的感觉。

功能简介

ToDoList，待办事件记录，主要功能如下：

增加待办事件
展示待办事件
事件标记为已完成
删除事件

包含的知识点：

vue组件生命周期
vue中v-bind动态绑定样式
v-for、v-bind、 v-on、v-model指令、插值表达式
父子组件相互通信
定义局部组件和全局组件
JS中数组的push、splice等操作

创建一个最基本的html，引入vue核心库。定义两CSS样式，用于表示事件是否已经完成。

通过v-model 来实现输入文本框和vue数据对象inputValue的双向绑定；

通过v-on(缩写@) 绑定 ”添加事件“按钮的响应函数；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style  type="text/css">
    .activated{
        color: red;
        font-size: 20px;
    }
    .unActivated{
        color: royalblue;
        font-size: 20px;
    }
</style>

</head>
<body>
<div id="app">
    <div>
       <input type="text" v-model="inputValue" name="" id="">
       <button @click="handleClick">添加事件</button>
    </div>
    <ul>
       <!-- 在这里定义子组件 -->
    </ul>
</div>

<script>
  var app = new Vue({
        el: '#app',
        data: {
            todos: [
                { text: 'Learn JavaScript' },
                { text: 'Learn Vue.js' },
                { text: 'Build Something Awesome' }
            ],
            inputValue: ""
        },
        methods:{
            handleClick: function () {
            }
        }
</script>
</body>
</html>

全局组件声明

    Vue.component("Item",{
        props: ['content'],
        template: "<li>{{ content.text }}</li>"
    })

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style  type="text/css">
    .activated{
        color: red;
        font-size: 20px;
    }
    .unActivated{
        color: royalblue;
        font-size: 20px;
    }
</style>

</head>
<body>
<div id="app">
    <div>
       <input type="text" v-model="inputValue" name="" id="">
       <button @click="handleClick" >submit</button>
    </div>
    <ul>
        <Item v-for="(todo,key) in todos" v-bind:content="todo" v-bind:index="key"  @delete="handleDelete">
        </Item>
    </ul>
</div>

<script>
   //局部组件
    var Item = {
        props: ['content','index'],
        //isActivated是定义在子组件的data里面的，而不是父组件 !!!
        template: `<li @click='handleItemClick' :class="isActivated==0 ? 'activated' : 'unActivated'"> {{ content.text }} </li>`,
        //注意子组件必须用data function !
        data: function () {
            return{
                isActivated: 0
            }
        },
        methods: {
            handleItemClick: function () {
                this.isActivated = this.isActivated === 1 ? 0 : 1
                this.$emit("delete",this.index);
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components:{
            Item
        },
        data: {
            todos: [
                { text: 'Learn JavaScript' },
                { text: 'Learn Vue.js' },
                { text: 'Build Something Awesome' }
            ],
            inputValue: ""
        },
        methods:{
            handleClick: function () {
                if(this.inputValue === ''){
                   return
                }
                let textObj = {text: this.inputValue}
                this.todos.push(textObj)
                this.inputValue = ''
            },
            handleDelete: function (index) {
                alert("确定要删除" + this.todos[index].text + "?")

            }
        }
})
</script>
</body>
</html>

weixin_39953356

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue style动态绑定样式_麻雀虽小五脏俱全的Vue入门案例

很多学习vue的同学ES6、CSS等的基础还不是很好，上来就直接通过 vue-cli提供的脚手架来创建webpack + Vue 项目，这样子是很不利于理解框架原理的，本文通过一个简单的html带大家入门vue，给你一个通透的感觉。功能简介ToDoList，待办事件记录，主要功能如下：增加待办事件展示待办事件事件标记为已完成删除事件包含的知识点：vue组件生命周期vue中v-bind动态绑定样式v...
复制链接

扫一扫