Vue2【新建Vue项目 -配置Vue-基本Vue指令】

下载@vue/cli

• npm i -g @vue/cli
• cnpm i -g @vue/cli （网速更快）

测试版本

• vue -V

下载脚手架项目

• vue create 项目名 （非中文 大写字母 特殊字符 空格）

vue.config.js配置

module.exports = {
  devServer: {//重启服务器
    port: 3000,//端口号
    open: false,//自动打开网页
    // host: 'localhost',//解决0.0.0.0 bug
  },
  lintOnSave: false//关闭eslint语法检查
}

启动项目

• npm run serve 启动服务器

修复错误

• npm run lint --fix 修复错误

打包

npm run build 打包

v-bind:src ="src" :src="src"

<template>
  <div>
    <!-- 指令v-开头 -->
    <!-- v-bind:动态设置标签属性值 
    v-bind:属性名='vue变量'
    -->
    <a v-bind:href="href">点我</a>
    <img :src="imgSrc" alt="" />
  </div>
</template>

<script>
import imgSrc from "./assets/狗头.png"; //先引入再绑定使用
export default {
  data() {
    return {
      href: "http://baidu.com",
      imgSrc: imgSrc,
    };
  },
};
</script>

<style>
</style>

v-on:click="代码" v-on:click="方法/方法（参数）"
@click.stop/once/preevent

<template>
  <div>
    <!-- v-on 绑定事件
    v-on:事件名='执行的代码' 
    v-on:事件名='methods中的函数名'
    v-on:事件名='methods中的函数名(实参)' 
    methods:vue函数对象 
     v-on简写为@ 省略: 事件名='methods中的函数名' 
    -->

    <h1>购买的商品数量:{{ count }}</h1>
    <button v-on:click="count += 1">+1</button>
    <button v-on:click="addFn">增加1</button>
    <button v-on:click="addCountFn(5)">增加5</button>

    <button @click="reduceFn">-1</button>
    <button @click="reduceCountFn(5)">-5</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addFn() {
      // this指向export default 的对象(vue组件实例化对象)
      this.count += 1;
      console.log(this);
    },
    addCountFn(num) {
      this.count += num;
      if (this.count > 50) {
        this.count = 50;
      }
    },
    reduceFn() {
      this.count -= 1;
      if (this.count < 1) {
        this.count = 1;
      }
    },
    reduceCountFn(num2) {
      this.count -= num2;
      if (this.count < 1) {
        this.count = 1;
      }
    },
  },
};
</script>

<style>
</style>

v-model="变量" v-model.number/trim/lazy="变量"

<template>
  <div>
    <p>
      <!-- parseFloat转数字类型才把值赋予给Vue数据变量-->
      <span>年龄：</span>
      <span v-text="age"></span>
      <input type="number" v-model.number="age" />
    </p>
    <p>
      <!-- 去除首尾空白字符才把值赋予给Vue数据变量-->
      <span>人生格言：</span>
      <span v-text="motto"></span>
      <input type="text" v-model.trim="motto" />
    </p>
    <p>
      <!-- 等表单失去焦点, 才把值赋予给Vue数据变量 -->
      <span>自我介绍：</span>
      <span v-text="intro"></span>
      <input type="text" v-model.lazy="intro" />
    </p>
    <p>
      <select name="" id="" v-model="from">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </p>
    <p>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
      <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
      <input type="checkbox" v-model="hobby" value="写代码" />写代码
    </p>
    <p>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender" />男
      <input type="radio" value="女" name="sex" v-model="gender" />女
    </p>
    <p>
      测试
      <input type="checkbox" value="测试" v-model="cs" />
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: "",
      from: "3",
      hobby: ["抽烟", "喝酒", "写代码"],
      gender: "男",
      cs: true,
    };
  },
};
// 总结:
// 特别注意: v-model, 在input[checkbox]的多选框状态
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
</script>

<style>
</style>

v-show="true/false"

v-if="true/false" v-else="true/false" v-else-if="true/false"

<template>
  <div>
    <!-- v-if和v-else搭配使用
    v-show不可以和v-else搭配使用
    v-if和v-else一定是相邻元素 -->
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <!-- <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p> -->

      <p v-if="age < 18">我成年了</p>
      <p v-else-if="age > 40">叔叔</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 45,
    };
  },
};
</script>

v-for="变量 in 数据（数组/对象/数字/字符串）":key="索引/对象id"

v-for="(变量,索引) in（数组/对象/数字/字符串）":key="索引/对象id"

<template>
  <div>
    <!-- key的要求是唯一的标识
    key的作用：列表顺序变化后 标记上一次变化
    便于dom
    
    -->
    <h1>学生姓名</h1>
    <ul>
      <!-- 遍历对象 value:值 key:键 -->
      <li v-for="(item, index) in arr" :key="index">
        {{ index }} - {{ item }}
      </li>

      <li v-for="obj in stuArr" :key="obj.id">
        <span>{{ obj.id }}</span>
        <span>{{ obj.name }}</span>
        <span>{{ obj.sex }}</span>
        <span>{{ obj.hobby }}</span>
      </li>

      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>
      <p>序号</p>
      <!-- 1开始遍历 -->
      <!-- <div v-for="i in count" :key="i">{{ i }}</div> -->
      <h1>字符串遍历</h1>
      <div v-for="item in msg" :key="item">{{ item }}</div>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 10,
      msg: "74期",
      arr: ["小明", "小红", "小黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
    };
  },
};
</script>

<style>
</style>

:class="{类名：true/false}"

:style="{css属性名:值/三元表达式/ *fontSize:'20px'* }"

<template>
  <div>
    <!-- fontSize:'20px' -->

    <!-- :class="{类名: 布尔值}" -->

    <!-- :style="{css属性名: 值}" -->
    <html
      :style="{ background: isOn ? 'yellow' : 'white', 'font-size': '20px' }"
      @click="isOn = !isOn"
      :class="{ red: isOn === true, black: isOn === false }"
    >
      开关
    </html>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOn: false,
    };
  },
};
</script>

<style scopde>
.red {
  color: red;
}
.black {
  color: black;
}
</style>

(页面内)过滤器:

 {{变量  | 过滤器名字}}
filters: {

过滤器名字: (值) => {

return "处理后的值"

}

    <!-- 过滤器连写 -->
    <h1>{{ messae | reverse | upper }}</h1>
<script>
export default {
  data() {
    return {
      price: 100,
      m: 200,
      messae: "qwetj",
    };
  },
  filters: {
    rmb(value) {
      return "￥" + value;
    },
    r(value, unit) {
      return unit + value;
    },
    reverse(value) {
      return value.split("").reverse().join("");
    },
    upper(value) {
      return value.toUpperCase();
    },
  },
};
</script>

main.js(全局)配置过滤器:

Vue.filter("过滤器名", (值) => {

return "处理后的值"

})

Vue.filter('dollar', (value) => {
  return '$' + value
})

计算属性

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 200,
    };
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
  // 注意: 计算属性和data属性都是变量-不能重名
  // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num() {
      return this.a + this.b;
    },
  },
};
</script>

<style>
</style>

侦听器/深度侦听器

语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){
       // 变量名对应值改变这里自动触发
        },
        deep: true, // 深度侦听(对象里面层的值改变)
        immediate: true // 立即侦听(网页打开handler执行一次)
      }
    }

侦听器/深度侦听器 案例

data() {
    return {
      newname: "",
      newprice: "",
      arr: JSON.parse(localStorage.getItem("pList")) || [],
    };
  },
  watch: {
    arr: {
      handler() {
        // 2. 存入本地
        localStorage.setItem("pList", JSON.stringify(this.arr));
      },
      deep: true,
    },
  },