Vue从入门开始

慕拢

已于 2022-09-20 09:07:25 修改

阅读量619

点赞数 3

文章标签：前端 vue

于 2022-09-19 22:02:54 首次发布

本文链接：https://blog.csdn.net/wsxokn945/article/details/126940034

版权

一、Vue概述

1.1、介绍

vue是一套用于构建用户界面的渐进式框架

1.2、特点

尤雨溪创造，v2与v3两个版本
结合了Angular的指令与reac的组件，虚拟dom
渐进式javascript框架

1.3、优点

中文文档完毕
简单，高效，生态丰富（插件多）
指令，组件，虚拟dom

二、了解

2.1、前端三大框架

Vue
React
Angular

2.2、记住单词

bind 绑定
property 属性
mount 挂载

三、导入与实例化

3.1、模板

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
</body>

3.2、引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

3.3、实例化

<script>
    new Vue({ // new Vue 函数创建一个新的应用实例
        el: "#app",  // 指定模板返回（element）
        data: {
            msg: "你好Vue!"
        },  // 指定数据
    })
    // el与data否是固定写法
</script>

四、指令与模板

指令是联系模板与vue实例的桥梁

4.1、特点

就是v开头的特殊属性，它的值预期为javascript单个表达式

可以渲染实例的值
v-text = "msg"
数学运算
v-text = "2+3"
使用js表达式
v-text = "msg.length"
如果是文本需要加单引号
v-text = " '我在中国,' +msg"

五、Vue模板语法

5.1、文本渲染指令

{{}}

渲染vue的数据
数学运算
执行js的普通方法
三元运算符（不能使用if，for等多行命令）

语法：

<div> {{msg}}</div>

 new Vue({
        el:"#app",//指定vue的模板css选择器
        data:{msg:"hello Vue!"}// 指定data数据
 })

v-text指令

指令是带有 v- 前缀的特殊属性。

<div v-text="msg"> {{msg}}</div>

v-html

为了输出真正的 HTML，你需要使用v-html

<div v-html="raw"></div>

<div v-text="raw"></div>
<div >{{raw}}</div>

5.2、属性渲染指令

v-bind

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<div v-bind:title="title"> div </div>

我们可以使用v-bind指令给html标签动态的绑定属性。

<button v-bind:disabled="canUse">按钮</button>

v-bind可以简写为：

<button :disabled="canUse">按钮</button>

<div :title="title"> 学前端，薪资就是高</div>

5.3、条件渲染指令

v-if

v-else

<body>
    <div id="app">
        <h1>武林大会</h1>
        <p v-if="score>90">好徒儿，来，为师传你秘籍！</p>
        <p v-else>孽徒,去思过崖面壁3天</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 95
            }
        })
    </script>
</body>

v-else-if

<body>
    <div id="app">
        <h1>武林大会 {{score}}</h1>
        <h1 v-if="score>=90">奖励独孤九剑</h1>
        <h1 v-else-if="score>=80">奖励葵花点穴手！</h1>
        <h1 v-else-if="score>=70">奖励三分归元气！</h1>
        <h1 v-else-if="score>60">奖励九阴真经</h1>
        <h1 v-else>孽徒,去思过崖面壁3天</h1>
        <input type="text" v-model="score">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                score: 87
            }
        })
    </script>
</body>

v-show

隐藏元素以css的方式
频繁切换用v-show
少量切换用v-if

<body>
    <div id="app">
        <h1>v-if与v-show</h1>
        <p v-show="flag">hello 我是v-show</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                flag: false
            }
        })
    </script>
</body>

六、遍历指令

v-for

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

<p v-for="(item,index) in list" v-key="item">{{index+1}}--{{item}}</p>
<!-- item  遍历的元素（自定义的名称）
index  遍历的下标（键名）
list  被遍历的数据 -->

v-bind:key

值必须是唯一的
让vue在渲染列表的时候更加优化
不建议用随机或者index

慕拢

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue从入门开始

vue是一套用于构建用户界面的渐进式框架。
复制链接

扫一扫

Vue从入门开始

1.1、介绍

1.2、特点

1.3、优点

二、了解

2.1、前端三大框架

2.2、记住单词

三、导入与实例化

3.1、模板

3.2、引入

3.3、实例化

四、指令与模板

4.1、特点

五、Vue模板语法

5.1、文本渲染指令

{{}}

v-text指令

v-html

5.2、属性渲染指令

v-bind

5.3、条件渲染指令

v-if

v-else

v-else-if

v-show

六、遍历指令

v-for

v-bind:key

“相关推荐”对你有帮助么？