vue模式

最新推荐文章于 2024-07-22 08:55:10 发布

weixin_34399060

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量225

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tuziling/p/10197010.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vuev2.5.21.js"></script>
</head>
<body>
    <div id="app">
            <input type="text" v-model="inputValue">
            <button v-on:click="BtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
    </div>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                list:["嗷嗷嗷"],
                inputValue:""
            },
            methods:{
                BtnClick:function(){
                //   console.log(this.list);
                this.list.push(this.inputValue);
                this.inputValue=""; 
                }
            }
        })
    </script>
    
</body>
</html>

先创建一个实例

el 接管ID /限制实例对象

data 定义数据

v-for="item in list" 这是vue的循环渲染数据

v-on:click="BtnClick" 绑定事件

v-model 是获取数据(拿值)他必须和一个事件进行绑定 /他是双向绑定input发生改变,data也会发生.

methods 定义实例(会自动执行click点击事件)/方法

mvp理论知识点:

view 视图 dom 视图层

model 控制台存储数据模型层

Presenter中转站

jquery是面向dom

vue面向数据

vue 用到es5 核心api 和虚拟dom

转载于:https://www.cnblogs.com/tuziling/p/10197010.html

weixin_34399060

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue模式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫