Vue3基础笔记（1）模版语法属性绑定渲染

news2024/11/16 9:25:30

Vue全称Vue.js是一种渐进式的JavaScript框架，采用自底向上增量开发的设计，核心库只关注视图层。性能丰富，完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用，适用于场景丰富的web前端框架。灵活性和可逐步集成性，是vue最显著的特点~

官方中文文档：

Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

一.API风格

1.选项式API（Vue2）

2.组合式API（Vue3）

二.安装

首先保证自己的Node.js版本在15以上。

切换到目标文件夹。

npm init vue@latest

建议先执行上述命令配置内地镜像。

如上，初学时全部勾选否认即可。

完成绿字提示的命令，出现上述界面。

访问，项目创建成功。

用VSCode打开。

下载Vue-Official插件。

三.目录结构

.vscode：开发工具的配置文件
node_modules：Vue项目的运行依赖文件
public：资源文件夹
src：源码文件夹
.gitignore：git忽略文件
index.html：入口Html文件
package.json：信息描述文件
README.md：注释文件
vite.config.js：Vue配置文件

四.模版语法

把Components文件夹中的东西都删掉，并修改app.vue的内容如下——仅包含script和template标签：

空白且不报错，如下：

export default{
    data(){
        return{
            msg:"Vue启动~",
            num:10,
            csdnnet:"<a href='mp.csdn.net'>跳转到CSDN</a>",
            myclass:"myclass1",
            myDs:false,
            ObjStyle:{
                id:"myId",
                // 必须是真实的属性名
                class:"myclass1"
            },
            can:false,
            doubt:"D",
            football:["拜仁慕尼黑","多特蒙德","莱比锡红牛","勒沃库森"],
            poka:[{
                "name":"帝牙卢卡",
                "gender":"steel_dragon"
            },
            {
                "name":"帕路奇犽",
                "gender":"water_dragon"
            },
            {
                "name":"骑拉帝纳",
                "gender":"ghost_dragon"
            }]
            
        }
    }
  }

如上，模版的写法是：（在return中通过键值对的方式创建值或者对象~）

export default{
    data(){
        return{
            
            
        }
    }
  }

然后在template标签中写元素——{{ }}即为所谓的插值语法：

<p>{{ msg }}</p>

每个绑定仅仅支持单一表达式，也就是一段能被求值的JavaScript代码。此外模版语法中不建议有任何带逻辑判断的操作~

<p>{{ num+1+2 }}</p>

五.属性绑定

            csdnnet:"<a href='mp.csdn.net'>跳转到CSDN</a>",
            myclass:"myclass1",
            myDs:false,

添加如上数据。

    <p v-html="csdnnet"></p>
    <!-- 双大括号会将数据插值为纯文本，而不是Html，必须使用v-html命令 -->
    <p>{{ csdnnet }}</p>

双大括号会将数据插值为纯文本，而不是Html，必须使用v-html命令，如下：

双大括号不能再HTML attributes中使用，想要响应式地绑定一个attribute，应该使用v-bind指令：

<div v-bind:class="myclass">属性绑定</div>

属性为：

<style>
.myclass1{
    color: aqua;
    font-size: 26px;
}
</style>

如果属性绑定的是null或者undefined，则属性会移除~

div v-bind="ObjStyle">llll</div>

将v-bind省略也是可以的，只保留冒号也成立。

            ObjStyle:{
                id:"myId",
                // 必须是真实的属性名
                class:"myclass1"
            },

如上，直接绑定一个对象也可以——相当于属性嵌套~

六.条件渲染

添加数据：

            can:false,
            doubt:"D",

条件渲染类似于JavaScript中的条件语句，又v-if、v-else、v-else-if：

    <div v-if="can">你能看见我吗？</div>
    <div v-else>看不到就看这里~</div>
    <div v-if="doubt===A">你现在看到的是字母A~</div>
    <div v-else-if="doubt===B">你现在看到的是字母B~</div>
    <div v-else-if="doubt===C">你现在看到的是字母C~</div>
    <div v-else>现在ABC都看不到~</div>
    <div v-show="can">同样的功能~</div>

v-if也可以换为v-show~

有关v-if和v-show的区别：

七.列表渲染

添加数据：

 football:["拜仁慕尼黑","多特蒙德","莱比锡红牛","勒沃库森"],
            poka:[{
                "name":"帝牙卢卡",
                "gender":"steel_dragon"
            },
            {
                "name":"帕路奇犽",
                "gender":"water_dragon"
            },
            {
                "name":"骑拉帝纳",
                "gender":"ghost_dragon"
            }]

如下，本质还是插值语法，注意点已经卸载了注释：

    <p v-for="item in football">{{ item }}</p>
    <div v-for="item in poka">
        <span>{{ item.name }}</span>
        <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
        <span>{{ item.gender}}</span>
    </div>
    <!-- 支持可选的第二个参数表示当前项的位置索引 -->
    <p v-for="(item,index) in football">{{ item }}&nbsp&nbsp&nbsp{{ index }}</p>
    <!-- 也可以用of -->