vue入门

最新推荐文章于 2021-11-17 18:08:25 发布

YGR1123打SD

最新推荐文章于 2021-11-17 18:08:25 发布

阅读量304

点赞数

分类专栏： vue 文章标签： vue入门

本文链接：https://blog.csdn.net/qq_38620956/article/details/102571881

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html头部引入依赖

<head>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

插值语法

初始化vue new vue({ })

el 表示使用vue语法接管某个区域 {{ }} 使用赋值 支持三目运算

data: 定义可以被 {{ }} 赋值的语句,以逗号隔开

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h1>{{false ? "ok":"no"}}</h1>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "hello Vue !",
            message2: "123"
        }
    })
</script>

v-on:click点击事件

使用 v-on: 绑定事件冒号后面函数类型 v-on:click 点击事件

new vue({ }) 中使用 methods 定义触发的函数

<div id="app">
    {{message}}
    <button v-on:click="fun1('hello world !')">vue的onclick</button>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            fun1:function (data) {
                alert(data);
                this.message=data
            }
        },
    })
</script>

v-on:keydown键盘事件

v-on:keydown 键盘按下事件函数中传入 $event 表示这个事件本身使用event.keyCode 获得按下键的Ascll值

event.preventDefault() 表示按下事件无效无法输入在输入框

<body>
<div id="app">
    <input type="text" v-on:keydown="fun($event)">
</div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            fun: function (event) {
                var code = event.keyCode;
                if (code < 97 || code > 105) {
                    event.preventDefault();
                }
            }
        },
    })
</script>

@mouseover鼠标焦点事件与事件传播

v-on 可简写为 @ 当鼠标移到textarea域时触发fun2 弹出一次, 事件又被传递到 fun1 又弹出一次

可以使用 event.stopPropagation();防止事件传播

<body>
<div id="app">
    <div @mouseover="fun1" id="div">
        <textarea @mouseover="fun2($event)">这是一个文件域</textarea>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            fun2:function (event) {
                alert("这是文件域!");
                event.stopPropagation();
            },
            fun1:function () {
                alert("这是div域")
            }
        }
    })
</script>

@mouseover.stop事件修饰符

@mouseover.stop 使用事件的属性stop 防止事件传播

<div id="app">
    <div v-on:mouseover="fun1" id="div">
        <textarea @mouseover.stop="fun2($event)">文件域</textarea>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            fun1: function () {
                alert("div域")
            },
            fun2: function (event) {
                alert("文件域")
            }
        },
    })
</script>

@keydown.enter 按键修饰符

事件修饰符中的一类 @keydown.enter 指定为按下回车事件.enter
.tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift . meta

<body>
<div id="app">
    <input type="text" @keydown.enter="fun1">      <!--还有一些-->
</div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            fun1:function () {
                alert("按下了回车!")
            }
        },
    })
</script>

vue的innerText 与 innerHtml

使用 v-text="message" v-html="message" 指定文本和HTML格式的的值

<body>
<div id="app">
    <div v-text="message"></div>
    <div v-html="message"></div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "<h1>hello world!</h1>",
        },
        methods: {},
    })
</script>

v-bind设置标签的属性

使用 v-bind:color="ys1" 绑定标签的属性使用data中定义的颜色 v-bind: 可简写为 :

<body>
<div id="app">
<!--    要想给html标签的属性设置变量的值，需要使用v-bind 可简写-->
    <font size="5" v-bind:color="ys1">哈啊哈哈</font>
    <font size="5" :color="ys2">嘿嘿嘿</font>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            ys1: "red",
            ys2: "green",
        },
        methods: {},
    })
</script>

v-bind 只能是 vue data数据中的数据向 html绑定数据

v-model 使用json数据设置属性的value值

直接使用 v-model="user.password" 获取 data中的数据与v-bind 区别是一个双向绑定数据的方法

<div id="app">
    <form action="" method="post">      <!--给标签属性 赋值json数据-->
        用户名：<input type="text" name="username" v-model="user.username"><br/>
        密码：<input type="text" name="password" v-model="user.password"><br/>
    </form>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                username: "wyc",
                password: "123",
            }
        },
        methods: {},
    })
</script>

v-for 遍历数组

( item, index ) in arra item 表示取出来的一个数据 index 表示这个数据的索引 in data中定义的数据

使用 { { } } 引用数据

<div id="app">
    <ul>
        <li v-for="(item,index) in arra ">{{item}}的索引:{{index}}</li>  <!--遍历数组-->
    </ul>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            arra: [1,2,3,4,5],
        },
    })
</script>

v-for 遍历字典

使用 v-for="( value, key ) in dic 遍历类似json 格式的数据

<div id="app">
    <ul>
        <li v-for="(value,key) in dic">{{key}} : {{value}}</li>  <!--遍历json格式-->
    </ul>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dic: {
                name:"wyc",
                age:15,
                birthday:"1997-12-9"
            },
        },
    })
</script>

v-for 遍历列表嵌套字典

遍历出 {name:"wyc", age:15, birthday:"1997-12-10"} 格式后直接使用 { {list.name} } 获取值

<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>生日</td>
        </tr>
        <tr v-for="(list,index) in lists ">
            <td>{{index}}</td>
            <td>{{list.name}}</td>
            <td>{{list.age}}</td>
            <td>{{list.birthday}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            lists: [
                {name:"wyc", age:15, birthday:"1997-12-10"},
                {name:"wyc2", age:16, birthday:"1997-11-9"},
                {name:"wyc3", age:18, birthday:"1998-12-9"},
            ],
        },
    })
</script>

v-if="true" v-show="false"

<span v-if="flag">xxx</span> v-show是根据表达式的值来切换元素的display css属性
<span v-show="flag">xxx</span> if是根据表达式的值来决定是否渲染元素-->

<body>
<div id="app">
    <span v-if="flag">传智播客</span>
    <span v-show="flag">itcast</span>        <!--if是根据表达式的值来决定是否渲染元素-->
    <button @click="toggle">切换</button>    <!--v-show是根据表达式的值来切换元素的display css属性-->
</div>
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        data: {
            flag: false
        },
        methods: {
            toggle: function () {
                this.flag = !this.flag;
            }
        }
    })
</script>

vue的生命周期

创建vue实例前 data 数据：undefined 挂载的对象：undefined 真实dom结构：{{message}}

创建vue实例后 data 数据：helloworld 挂载的对象：undefined 真实dom结构：{{message}}

挂载到dom前 data 数据：hello world 挂载的对象：<div id="app"> {{message}} </div> 真实dom结构 : {{message}}

挂载到dom后 data 数据：hello world 挂载的对象：<div id="app">hello world </div> 真实dom结构 : hello world

如果数据有更新前 data 数据：good... 挂载的对象：<div id="app">hello world </div> 真实dom结构 : hello world

如果数据有更新后, data 数据：good... 挂载的对象：<div id="app">good... </div> 真实dom结构 : good...

vue实例销毁前 data 数据：good... 挂载的对象：<div id="app">hello world </div> 真实dom结构 : hello world

vue实例销毁后 data 数据： good... 挂载的对象：<div id="app">hello world </div> 真实dom结构 : hello world

创建vue实例会初始化数据

挂载就是准备将html代码放入浏览器显示 <div id="app">hello world </div>

如果数据有更新前 vue 对象中的数据会先变化, 挂载对象不会变, 更新后才会变

vue实例销毁时,挂载对象不会消失

YGR1123打SD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

html头部引入依赖<head> <script src="js/vuejs-2.5.16.js"></script></head>插值语法初始化vue new vue({ }) el 表示使用vue语法接管某个区域 ...
复制链接

扫一扫