静态资源目录基本指令和变量

拼搏现实的明天。 2023-05-29 03:24 101阅读 0赞

> 1.  node\_modules打包时不拷，它为依赖文件
> 2.  在其他地方运行装在`devDenpencies`;（即在安装组件时在末尾要加上-dev）

#### 静态资源目录 ####

1.  简单版本（使用`vue init webpack-simple`安装）的vue没有static和public静态文件夹，需要自己添加定义（名称为static或者public）
2.  放在静态资源目录中的内容

<template>
      <div id="app">
        <img src="public/logo.png" alt="">//使用绝对路径
      </div>
    </template>

编译打包后路径不会被修改

> public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。在vue2.x版本类似static/ 文件夹。

![20191102231607860.png][]

### 基本指令 ###

##### 数据绑定 #####

1.  `v-bind` 绑定属性、类名称等  
    格式

v-bind:属性="值"

可以简写为

：属性="值"

例如

单向绑定 ：值不会随着文本框的值动态发生改变  
![在这里插入图片描述][20191103170918379.png]  
data中的数据

export default { 
      name: "app",
      data() { 
        return { 
          msg: "数据绑定",
          val: "this is a test",
          title: "這里是標題",
          classname:"s h"
        };
      }
    };

1.  `v-model:`数据双向绑定（前台修改后台同步修改），绑定表单元素  
    格式

v-model="值"

例如

![在这里插入图片描述][20191103171317660.png]  
问题：阻止数据的双向绑定？？？

1.  绑定多个类名称：直接在声明的对象的属性中空格添加类（上文的`v-bind`中）；  
    或者直接添加对象`{‘s’:true,’h’:true};`true表示确认绑定；  
    或者在对象中新建变量，数组传入\[变量名1，变量名2……\]  
    `<p v-bind:class="[classname1,classname2]"></p>`

4.绑定样式：

<p v-bind:style='{"color":"#00ffff"}'>v-bind直接绑定style</p>

![在这里插入图片描述][20191104233053687.png]  
或者在data中定义变量，然后定义：color变量；

<p v-bind:style='{"color":fontColor}'>v-bind直接绑定style</p>

或者在对象中将多个属性(比如字体和颜色)添加到一个对象中，然后调用

<p v-bind:style="fstyle">v-bind绑定多个样式style</p>

data中定义的变量为

data() { 
        return { 
          msg: "数据绑定",
          val: "this is a test",
          title: "這里是標題",
          classname1:"s",
          classname2:"h",
          fontColor:"red",
          fstyle:
          { 
            color:"#00ffff",
            "font-size":"24px"
          }
        };

1.  绑定元素文本值：  
    v-html：自动解析字符串标签;  
    v-text：直接显示文本

![在这里插入图片描述][2019110522535833.png]

1.  最基本的绑定表达式`{ {msg}}`文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

<template>
      <div id="app">
        
        <p>{ { msg}}</p>
      </div>
    </template>
    
    <script>
    export default { 
      name: "app",
      data() { 
        return { 
          msg: "数据绑定"
        };
      }
    };
    </script>

##### 渲染 #####

1.  `v-for` 渲染给谁写：要和前面的值有空格

其中data中定义了`arr:[1,2,3,4,5,6]`，`key`值不能重复,所以一般使用元素索引

<ul>
       <li v-for="(item,index) in arr" :key="index">{ { item+","+index}}</li>
     </ul>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

1.  `v-for` 遍历对象中的属性

![在这里插入图片描述][20191105231103822.png]

1.  v-for嵌套

![在这里插入图片描述][20191105232027814.png]

##### 显示隐藏的多种表达方式 #####

1.  `<p v-show="true">我是显示的内容</p>` 或者 `<p v-show="true">我是隐藏的内容</p>`
2.  内容可以是三元运算符

<p v-show="num==0?true:false">我是显示的内容</p>
     <p v-show="num==1?true:false">我是隐藏的内容</p>

##### 条件语句 #####

1.  v-if
2.  v-else
3.  v-else-if

> `v-else`里不添加任何条件，否则会报错

<p v-if="num==0">num==0</p>
        <p v-else-if="num==1">num==1</p>
        <p v-else>num是非0非1的其他值</p>

1.  条件语句可以直接添加给模板

<template v-if="num==0">
          <div>
            满足此条件显示这段代码
          </div>
        </template>

[20191102231607860.png]: https://img-blog.csdnimg.cn/20191102231607860.png
[20191103170918379.png]: https://img-blog.csdnimg.cn/20191103170918379.png
[20191103171317660.png]: https://img-blog.csdnimg.cn/20191103171317660.png
[20191104233053687.png]: https://img-blog.csdnimg.cn/20191104233053687.png
[2019110522535833.png]: https://img-blog.csdnimg.cn/2019110522535833.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105230409945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191105231103822.png]: https://img-blog.csdnimg.cn/20191105231103822.png
[20191105232027814.png]: https://img-blog.csdnimg.cn/20191105232027814.png