Vue入门

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30840253

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zx125/p/11278932.html

本文详细介绍了VUE.js的基本用法，包括插值表达式、条件渲染、列表渲染、事件处理、表单输入绑定、组件系统等核心概念，适合VUE初学者快速上手。

VUE入门

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx125"></div>
    
</body>
</html>

el 挂载点

template 模板

{{zx}} 插值表达式

v-on:click=“zx” 也可以写成 @click=“zx”

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx"></div>
    
</body>
</html>

v-text="zx"

文本输出

v-html="zx"

会被浏览器解析成界面

v-bind: 属性绑定可以简写：

双向数据绑定 v-model

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <input v-model="msg">
        <div :title="msg2">{{msg}}</div>
    </div>
    
</body>
</html>

computed

用于数据的拼接

watch 侦听器

可以监听数据的改变等等

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <input v-model="msg">
        <input v-model="msg2">
        <div>{{fullname}}</div>
        <div>{{count}}</div>

    </div>
    
</body>
</html>

v-if v-show

都是控制显示和隐藏

v-if 频率少使用，直接去除dom

v-show 频率高使用，给dom加样式

v-for

加：key加快渲染

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <div v-show="show">hahah</div>
        <button @click="click1">bu</button>
        <ul>
            <li v-for="(item,index) of lis" :key="index">{{item}}</li>
        </ul>
    </div>
    
</body>
</html>

todolist

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <input v-model="input_value">
        <button @click="click1">提交</button>
        <ul>
            <li v-for="(item,index) of lis" :key="index">{{item}}</li>
        </ul>
    </div>
    
</body>
</html>

todolist组件拆分

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <input v-model="input_value">
        <button @click="click1">提交</button>
        <ul>
            <zx v-for="(item,index) of lis" :key="index" :content="item"></zx>
        </ul>
    </div>
    
</body>
</html>

组件和实例的关系

其实所有的组件就是实例，可以有实例的所有属性和方法

如果实例没有template，默认的就是挂载点里面飞内容为模板

父子组的通信 (带删除的todolist)

父子组件传值的问题（难点，重点）：

父组件怎么向子组件传递数据呢？通过属性的形式向子组件传递数据

子组件怎么向父组件传递数据呢？通过发布订阅模式$emit(事件，参数)，子组件发布一个事件，父组件之前恰好之间就已经订阅了这个事件，那么子组件就可以通过发布订阅的形式，向父组件发布数据了。

<!DOCTYPE html>
<html>
<head>
    <title>VUE入门</title>
    
</head>
<body>
    <div id="zx">
        <input v-model="input_value">
        <button @click="click1">提交</button>
        <ul>
            <zx v-for="(item,index) of lis" :key="index" :index="index" :content="item" 
            //订阅
            @delete="handleDelete"></zx>
        </ul>
    </div>
    
</body>
</html>

转载于:https://www.cnblogs.com/zx125/p/11278932.html