本文介绍: 这不我为了适应市场的需求来系统学习vue了:生成一个基础的vue项目
  • 为啥现在对后端要求这么高?
  • 为啥不要求前端会后端呢?

可能是后端人太多了,要求后端需要前端框架(vue react angular ),

这不我为了适应市场的需求来系统学习vue了:

生成一个基础的vue项目

创建vue项目

vue create projectname

创建vite+vue

npm init vite@latest projectname --template vue

package.json

记录项目信息,名称,版本

生产依赖以及开发依赖

package-lock.json

追踪package.json中的依赖版本

项目结构:

node_modules 依赖文件夹

public 资源文件夹

src 源码文件

package.json 信息描述文件

vite.config.js vue配置文件

package-lock.json 依赖确定文件

模板语法:

App.vue

<script&gt;
export default{
  data(){
    // 每个绑定仅支持单一表达式,也就是能够被求值的js代码
    return {
      msg:"模板语法",
      key:"键值对",
      ok:true,
      net:"<a href='http://www.baidu.com'&gt;百度一下</a&gt;"
    }
  }
}
</script&gt;

<!-- 模板语法 --&gt;
<template&gt;
<h1&gt;vue基础--文本插值</h1>
<p>{{ msg.split("").reverse().join("") }}</p>
<span>{{ key }}</span>
<p>{{ ok?'yes':'no' }}</p>

<p>{{ net }}</p>
<!-- 使用原始html 需要使用 v-html  -->
<p v-html="net"></p>
</template>

双大括号将会将数据插值解析文本,而不是html,若想插入html,需要使用vhtml

属性绑定

<script>
export default{
  data(){
    // 每个绑定仅支持单一表达式,也就是能够被求值的js代码
    return {
      msg:"模板语法",
      key:"键值对",
      ok:true,
      net:"<a href='http://www.baidu.com'>百度一下</a>",
      dynamicId: "appid",
  dynamicClass:"appclass",
  name:"中国"
    }
  }
}
</script>

<!-- 模板语法 -->
<template>
<h1>vue基础--文本插值</h1>
<p>{{ msg.split("").reverse().join("") }}</p>
<span>{{ key }}</span>
<p>{{ ok?'yes':'no' }}</p>

<p>{{ net }}</p>
<!-- 使用原始html 需要使用 v-html  -->
<p v-html="net"></p>
<!-- 绑定属性使用 v-bind-->
<div v-bind:id="dynamicId" v-bind:class="dynamicClass">{{ name }}</div>
</template>

由于属性绑定很常用,所以可以简写为 :

所以上面属性绑定多个部分可以是下面这个样子的:

<div :id="dynamicId" :class="dynamicClass">{{ appName }}</div> 

在这里插入图片描述

原文地址:https://blog.csdn.net/weixin_54061333/article/details/134616657

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_3426.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注