vue 学习笔记

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30515513

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/milx/p/6111382.html

本文介绍了Vue.js的基本用法及特点，包括响应式数据绑定系统、语法精简、浏览器兼容性等，并通过实例展示了如何使用Vue.js进行DOM元素绑定、事件处理等操作。

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

探寻vue之美

　　前言：之前就听说vue是一个非常厉害的mvvm框架，大大小小的介绍文章看了不少。但是没有系统的学习，今天就来系统的学习一下吧。

无论学习那个库，其阅读官方文档是必不可少的: vue官方网站

　　概述：

　　vue的核心是一个响应的数据绑定系统，它可以让数据与dom保持同步。vue语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。

一.使用：

　Vue的使用非常简单。下载好vue.js文件。在HTML中直接引用即可：

<script src="../vue.js"></script>

　　先来一个简单的例子：

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{ *name }}</span>    
        {{{ name }}}
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"<h1>ZNS</h1>"
            }
        })
    </script>
</body>

vue的{{{ }}}，可以解析字符串

<div id="box">
    <input type="text" v-model='name' />
    <input type="text" v-model='name' />
 <p>{{{name}}}</p>
</div>
<script src="libs/vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        }    
    })
</script>

vue中{{* }}，不可变模板

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{*name }}</span>    
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"zns"
            }
        })
    </script>
</body>

在Vue中为DOM元素绑定事件，通过v-on指令或事件语法糖 @ 为DOM元素绑定事件。

<body>
<div id="box">
    <input type="button" value="点击" v-on:click='fun' />
</div>
<script src="libs/vue.js"></script>
<script>    
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        },
        methods:{
            fun:function(){
                alert(1)    
            }    
        }    
    })
</script>

</body>

@mouseover/@mousemove/@mousedown/@keydown//等等还有好多。

转载于:https://www.cnblogs.com/milx/p/6111382.html