vue入门笔记

最新推荐文章于 2021-09-03 16:49:09 发布

追梦者123

最新推荐文章于 2021-09-03 16:49:09 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/WYT11/article/details/119519993

版权

vue入门笔记

<!--声明式渲染-->
<body>
    <script src="./vue/dist/vue.js"></script>  <!-- 引入vue-->
    <h1 id="app">
        {{name}}非常帅！！！ 
        <!-- 获取data里面的对象值 -->
    </h1>
    <script>
        let vm = new Vue({
            el: "#app", // id选择器选择到某个元素上面
            data: {
                name: "张三",
                age: 22
            }
        });
    </script>
</body>

双向绑定

在这里插入图片描述
此处的效果为输入框中输入数值，下面的数值跟着一起变

vue时间绑定

在这里插入图片描述
vue绑定方法

指令

必须写在控制标签的体内
{{}} 中可以是属性，也可以是方法，也可以是运算但必须有返回值）（就是说只能在页面动态显示，不能再标签体内）
v-html="" 获取data中的属性，使用HTML格式显示
v-text="" 获取data中的属性，获取HTML的内容
v-bind="" v-bind:属性="" 给HTML标签属性绑定值（
<a v-bind:href="">go</a>

<span v-bind:class="{active:isActive,`text-danger:haserror`}"

v-bind 为单向绑定
在这里插入图片描述

组合键

v-for 遍历语法

v-for

在这里插入图片描述

v-if与v-show

在这里插入图片描述
二者的区别就是v-if如果为false则该元素会从页面中取消掉二v-show则会使元素在页面隐藏而已

v-if 可以与v-for 结合使用

computed
在这里插入图片描述
v-model 为元素双向绑定

watch 侦听器

在这里插入图片描述

vue组件化（全局组件）

在这里插入图片描述

局部组件

在这里插入图片描述

生命周期和钩子函数

vue模块化开发

在这里插入图片描述