Vue学习笔记

最新推荐文章于 2025-03-01 19:48:24 发布

锅巴胸

最新推荐文章于 2025-03-01 19:48:24 发布

阅读量217

点赞数

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

本文为博主原创文章，未经博主允许不得转载。有问题可加微信：_liubao

本文链接：https://blog.youkuaiyun.com/sinat_15955423/article/details/85774332

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本教程通过实例演示Vue.js的基本用法，包括数据绑定、条件渲染、列表渲染、事件处理、表单输入绑定、组件系统等核心功能。同时，介绍了如何使用Vue进行事件监听、计算属性的设置以及数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<div id="app-2">
     <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app-3">
    <p v-if="seen">现在看到我了</p>
</div>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
            {{ todo.name }}
        </li>
    </ol>
</div>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<div id="app-7">
    <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再
          作详细解释。
        -->
        <todo-item
                v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
        </todo-item>
        <li v-for="app in appList">
            {{ app.name }}
        </li>
    </ol>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于' + new Date().toLocaleString()
        }
    })
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: false
        }
    })
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                {text: '1', name: 'liubao'},
                {text: '2'},
                {text: '3'},
                {text: '4', name: 'johan'},
            ]
        }
    })
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'hello Vue.js'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')//分离 逆转 柔和
                //ES6：this.message = [...this.message].reverse().join('');
            }
        }
    })
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'hello Vue!'
        }
    })
    app3.seen = true
    app.message = '现在日期' + new Date().toLocaleDateString()
    app4.todos.unshift({name: 'tob', text: '5'})
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                {id: 0, text: '蔬菜'},
                {id: 1, text: '奶酪'},
                {id: 2, text: '随便其它什么人吃的东西'}
            ],
            appList: [
                {id: 1, name: 'QQ'},
                {id: 2, name: '微信'},
                {id: 3, name: '微博'},
                {id: 4, name: '钉钉'}
            ]
        }
    })

</script>
</body>
</html>

页面效果：

监听事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>监听事件</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="example1">
    <button @click="counter += 1">+1</button>
    <p>点击次数{{counter}}</p>
</div>
<div id="example2">
    <button @click="counter1">+1</button>
    <p>点击次数{{counter}}</p>
</div>
<div id="example3">
    <button @click="say('hi')">say hi</button>
    <button @click="say('hello')">say hello</button>
</div>

</body>
<script>
    var example1 = new Vue({
        el: '#example1',
        data: {
            counter: 0
        }
    })
    var example2 = new Vue({
        el: '#example2',
        data: {
            counter:10
        },
        methods:{
            counter1:function () {
                this.counter += 1
            }
        }
    })
    var example3 = new Vue({
        el:'#example3',
        methods: {
            say:function (message) {
                alert(message)
            }
        }
    })
</script>
</html>

效果：

计算属性

<div id="demo">
    {{fullName}}
</div>

 var vm = new Vue({
        el:'#demo',
        data:{
            'firstName':'Foo',
            'lastName':'Bar',
        },
        computed: {
            fullName:function () {
                return this.firstName+ '  '+this.lastName
            }
        }
    })

vue追加值

<div id="demo">
    <input v-model="message">
    {{fullName}}
</div>

var vm = new Vue({
        el:'#demo',
        data:{
            'firstName':'Foo',
            'lastName':'Bar',
            'message':'hello'
        },
        computed: {
            fullName:function () {
                return this.firstName+ '  '+this.lastName+' '+this.message
            },
        }
    })

点击增加数组和点击数组的zh值删除对应值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div :title="title">hello</div>
        <input v-model="content">
        <div @click="modelClick">{{content}}</div>
    </div>

    <div id="full">
        <input v-model="firstName">
        <input v-model="lastName">
        {{fullName}}
        <br>{{count}}
    </div>

    <div id="button">
        <ul>
            <li v-for="(item,index) of list" :key="index">{{index}}-{{item}}</li>
        </ul>
        <div v-if="show">hello v-if</div>
        <div v-show="show">hello v-show</div>
       <button @click="toggle">toggle</button>
    </div>

    <div id="list">
        <input v-model="inputValue">
        <button @click="insertClick">提交</button>
        <ul>
            <li v-for="(item,index) of list" @click="delClick(index)">{{item}}</li>
        </ul>
    </div>
<script>

    new Vue({
        el: '#root',
        data: {
            content: 'this is content',
            title: 'this is title',
        },
        methods: {
            modelClick: function () {
                this.content = this.content+'点击出来的'
            }
        }


    })
    new Vue({
        el: '#full',
        data: {
            'firstName': '1',
            'lastName': '2',
            'count': 0
        },
        computed: {
            fullName: function () {
                return this.firstName+' '+this.lastName
            }
        },
        watch: {
            fullName: function () {
                this.count ++
            }
        }
    })
    new Vue({
        el: '#button',
        data: {
            show: true,
            list: [1,2,3]
        },
        methods: {
            toggle: function () {
                this.show = !this.show
            }
        }
    })
    new Vue({
        el: '#list',
        data: {
            inputValue: '',
            list: [1,2,3]
        },
        methods: {
            insertClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ''
            },
            delClick: function (index) {
                this.list.splice(index,1)
            }
        }
    })
</script>
</body>
</html>