Vue第一周基础内容大全，Vue入门必看

最新推荐文章于 2024-07-12 14:10:05 发布

疯狂的大番茄

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/z27566/article/details/126976983

版权

Vue特点：

尤雨溪，v2，v3，

结合了angular的指令与react的组件，虚拟dom

渐进式javascript框架

Vue优点：

中文文档完毕

生态丰富（插件多）

上手简单

指令，组件，虚拟dom

导入与实例化

模板：

    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>

别忘记引入Vue文件喔~

实例化

    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

文本渲染指令：

{{}}

v-text

v-html

v-html会解析html文本

可以渲染实例的值 v-text“msg”

数学运算v-text=“2+3”

使用js表达式v-text=“msg.length”

如果需要文本需要加单引号v-text“我在中国，+”

{{}}文本渲染指令

1 渲染Vue的数据

2 数学运算

3 执行js的普通方法split分割 reverse反转数组，join链接数组为字符串

4 三元运算符(不能使用if for等多行命令)

遍历指令：

v-for

可以对字符串，数字，列表，对象进行遍历

<li v-for="(a,index) in agg">{{index+1}}-{{a}}</li>

a 遍历的元素（自定义的名称）

index 遍历的下标

agg 遍历的数据

：key

值必须是唯一的，为了让Vue更好的渲染列表

条件渲染指令：

这里if，else，else-if与原生js中的原理相同

v-if

v-else

v-else-if

v-show

v-bind:key

v-bind:title="msg"属性绑定

:title="msg"属性绑定简写形式

：class：id：disabled

v-if与v-show

1都是用来控制显示与隐藏

2v-if是通过dom操作实现隐藏，v-show通过css方式隐藏

3频繁切换用v-show反之v-if

事件：

v-on：click=“num++”事件指令

@click=“”num++事件指令简写形式

表单：

v-momdel=“num”

把num的数据和表单的值绑定在一起

属性绑定：

要给属性动态添加值

需要加个 v-bind 可以简化写成“：”

<div class="app">
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: ".app",
            data: {
                tips: "请输入文本内容"
            }
        })
    </script>

 <div class="app">
        <input type="text" v-bind:placeholder="tips">
   //拼接
        <button :title="'box'+index">1</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: ".app",
            data: {
                tips: "请输入文本内容",
                index: 9,
            }
        })
    </script>