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

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/ 文件夹。

基本指令

数据绑定

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

v-bind:属性="值" 

可以简写为

：属性="值" 

例如

	<p>
      <input type="text" v-bind:value="val" />
      // <input type="text" :value="val" />
    </p>
    <p>{{val}}</p>

<p v-bind:class="classname"></p>

单向绑定 ：值不会随着文本框的值动态发生改变

data中的数据

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

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

v-model="值"

例如

	<p>
      <input type="text" v-model="val" />
    </p>
    <p>{{val}}</p>

问题：阻止数据的双向绑定？？？

3. 绑定多个类名称：直接在声明的对象的属性中空格添加类（上文的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>

或者在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"
      }
    };

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

  <p v-html="testht"></p>
  <p v-text="testht"></p>

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

<template>
  <div id="app">
    <!-- 数据绑定-->
    <p>{{msg}}</p>
  </div>
</template>

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

渲染

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

<ul>
   <li v-for="item in arr" :key="item">{{item}}</li>
 </ul>

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

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

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

   <ul>
      <li v-for="(item,index) in obj" :key="index">
        姓名：{{item.name}}————性别：{{item.sex}}
        </li>
    </ul>

3. v-for嵌套

    <ul>
      <li v-for="(item,index) in obj" :key="index">
        姓名：{{item.name}}————性别：{{item.sex}}
        <span v-for="(hob,i) in item.hobby" :key="i">
          {{hob}}、
          </span>
      </li>
    </ul>

显示隐藏的多种表达方式

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>

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

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