vue常用指令和优势-01

• vue是什么?

  • 一个JavaScript渐进式框架,有自己的规则和语法

  • 渐进式就是按需逐渐集成功能的使用

• vue的优势

  • vue作为一款轻量级框架 , 简单易学 , 双向绑定数据 , 组件化 , 数据和结构相分离 , 虚拟DOM , 运行速度块 , 并且作者为中国人尤雨溪, 对应的API文档对国内开发者优化, 作为前端开发人员的首选入门框架
  • 优势
    • vue可以进行组件化开发 , 使代码编写量大大减少 , 读者更加易于理解
    • vue最突出的优势在于可以对数据进行双向绑定
    • 使用vue编写出来的界面效果本身就是响应式的, 这使得网页在各种设备上都能显示出非常好看的效果
    • 相比于传统的页面通过超链接实现页面的切换和跳转,vue使用路由不会刷新页面
    • vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验
    • vue的第三方UI组件库使用起来节省很多开发时间,从而提示开发效率

•  vue常用指令(以下代码使用脚手架@vue/cli)

  • v-model 多用于表单元素实现双向数据绑定

    • <template>
        <div>
          <p>{{ message }}</p>
          <input type="text" v-model="message" />
        </div>
      </template>
      
      <script>
      // 目标 : 输入框输入内容 , 标签内容发送变化
      // 思路 : 双向绑定
      // 语法 : 在表单上添加 v-model = '变量名'
      export default {
        data() {
          return {
            message: "hello word",
          };
        },
        methods: {},
      };
      </script>
      
      <style>
      </style>

      <template>
        <div>
          <div>
            <span>用户</span>
            <input type="text" v-model="username" />
          </div>
          <div>
            <span>密码</span>
            <input type="password" v-model="userpassword" />
          </div>
          <div>
            <span>来自于</span>
            <!-- 
                下拉框在select身上写v-model
             -->
            <select v-model="from">
              <option value="北京">北京市</option>
              <option value="上海">上海市</option>
              <option value="广州">广州市</option>
            </select>
          </div>
          <div>
            <span>爱好</span>
            <!-- 
                v-model 遇到复选框,如果为非数组类,则关联到复选框的type-value值(true/false)
                如果为数组类,则为关联的value值(对应的变量应该为数组 , hopbby为本组的变量)
             -->
            <input type="checkbox" v-model="hopbby" value="0" />0
            <input type="checkbox" v-model="hopbby" value="1" />1
            <input type="checkbox" v-model="hopbby" value="2" />2
          </div>
          <div>
            <span>性别</span>
            <input type="radio" name="s" v-model="sex" value="0" />0
            <input type="radio" name="s" v-model="sex" value="1" />1
          </div>
        </div>
      </template>
      
      <script>
      // 目标 : 输入框输入内容 , 标签内容发送变化
      // 思路 : 双向绑定
      // 语法 : 在表单上添加 v-model = '变量名'
      // 细节 :
      // - v-model在下拉框上面
      // - v-model在复选框上面
      // - v-model在单选框上面
      // -------------------------修改默认选中，不能停留在html属性上，
      // 在vue的双向绑定中，更改数据的值可以对页面进行默认选择-----------
      export default {
        data() {
          return {
            username: "小李",
            userpassword: "",
            from: "北京",
            hopbby: ["1"],
            sex: "0",
          };
        },
        methods: {},
      };
      </script>
      
      <style>
      </style>

      <template>
        <div>
          <div>
            <span>年龄</span>
            <input type="number" v-model.number="age" />
          </div>
          <div>
            <span>人生格言</span>
            <input type="text" v-model.trim="motto" />
          </div>
        </div>
      </template>
      
      <script>
      // 目标 :v-model 修饰符
      // 注意：获取标签上的值，只要v-model一染手，都是字符串
      // 修饰符
      // .number - 用parseFloat -> 数值 -> vue变量。
      // .trim - 去除首位空格 -> vue变量
      // .lazy - 等待change事件再同步数据 -> vue变量
      export default {
        data() {
          return {
            age: 0,
            motto: "",
          };
        },
      };
      </script>
      
      <style>
      </style>

  •  v-for 格式 : v-for=' 字段名 in 数组(json) ' 循环数组或json(-从vue2开始取消了$index)

    • <template>
        <div>
          <ul>
            <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
          </ul>
          <ul>
            <li v-for="(item, index) in stuArr" :key="index">
              <span>{{ item.id }}</span>
              <span>{{ item.name }}</span>
              <span>{{ item.sex }}</span>
              <span>{{ item.hobby }}</span>
            </li>
          </ul>
        </div>
      </template>
      
      <script>
      // 目标 : v-for用数据循环生成标签
      export default {
        data() {
          return {
            arr: ["1", "2", "3", "4", "5", "6", "7", "8"],
            stuArr: [
              {
                id: 1001,
                name: "孙悟空",
                sex: "男",
                hobby: "吃桃子",
              },
              {
                id: 1002,
                name: "猪八戒",
                sex: "男",
                hobby: "背媳妇",
              },
            ],
          };
        },
      };
      </script>
      
      <style>
      </style>

  • v-show 显示内容 显示和隐藏通过display:none;
  • v-hide 隐藏内容 显示和隐藏通过display:none;
  • v-if 显示与隐藏(通过删除dom元素来进行)
    • v-else-if必须和v-if连用 
    • v-else必须和v-if连用 
    • 不能单独使用 否则会报错 模块编译错误
  • v-bind 动态绑定 (及时对页面的数据进行更改)
  • v-on:事件类型 给标签绑定函数 , v-on可以简写为@
  • v-text 解析文本
  • v-html 解析html标签
  • v-bind:class 
    • 三种绑定方法
      • 对象型 '{res:isred}'
      • 三元型' isred ? 'red' : 'blue' '
      • 数组型'[ { red : 'isred' } , { blue : 'blue' } ]'
  • v-once 进入页面时 只渲染一次 不再进行渲染
  • v-cloak 防止闪烁
  • v-pre 把标签内部的元素原位输出