Vue.js 指令详解与实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/AKindofo/article/details/124698585

安装

1.使用<script>直接引用。

使用<script src=" ">方式引入，会添加一个全局变量Vue。
两个版本：
（1）.开发版本：包含完整的警告和调试模式。vue.js
（2）.生产版本：压缩代码。vue.min.js

常用Vue指令

指令	含义
{{}}	差值表达式
v-text：	来绑定渲染文本表达式的值
v-html：	将带标签的字符串渲染成真的html内容
v-show：	移除样式或者添加样式
v-if：	实现元素的显示和隐藏
v-else-if：	搭配v-if一起使用来进行条件判定的渲染
v-else：	用来结束条件判定的渲染
v-for：	通常是对数组进行遍历
v-on：可简写为 `@	事件绑定
v-bind：可简写成：	单项绑定
v-model：	双向绑定
v-slot：
v-pre：
v-cloak：
v-once：

什么是vue

1.用来构建用户界面

使用vue往html页面中填充数据，非常的方便。

2.框架

框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
要学习vue，就是在学习vue框架中的规定用法。
vue的指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库。

3.MVVM
M-Model : 试图
V-View : 模型数据
VM-ViewModel:Vue 在这里插入图片描述

Vue 实例

const vm = new Vue({
    el: '',//最大盒子的id
    data: {},//数组数据
    methods: {},//事件处理函数
    computed:{}，//计算属性
})

指令

内容渲染指令

作用：用来辅助开发者渲染MOM元素的文本内容
常用渲染指令：

v-text 指令缺点：会覆盖元素内部原有的内容！
{{}}差值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html指令作用：可以把带有标签的字符串，渲染成真正的HTML内容！

 <div id="app">
        <p v-text="username">李四</p>
        <hr>
        <p>李四:{{username}}</p>
        <hr>
        <p v-html="label"></p>
    </div>
    <!-- 导入Vue框架 -->
    <script src="./libs/vue.js"></script>
    <script>
        //new一个实例对象
        const vm=new Vue({
            el:'#app',//el固定写法，相当于选择器。
            data:{  //data 对象就是想要渲染到页面上的数据。
                username:'张三',
                gender:'男',
                label:'<h1>学习</h1>'
            },
        })
    </script>

属性绑定指令

在vue 中可以使用 v-bied:指令，为元素的属性动态绑定值；
简写是英文的 :
在使用v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<div :title="'box' + index">这是一个 div</div>

事件修饰符

在这里插入图片描述

事件绑定指令

1.v-on:简写是 @
2.语法格式为：

<button @click>="add"></button>

methods: {
   add(){
    // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count +=1
   }
}

3.$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

<button @click="add(3, $event)"></button>

methods: {
    add(n,e) {
      // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count +=1
    }
}

双向绑定指令

1.v-model:双向绑定事件，常用来和表单元素双向绑定数据，增加用户体验。

（1）.可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。
（2）. v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

（3）.
在这里插入图片描述

条件渲染

作用：控制DOM的显示与隐藏。

1.v-if :的原理是每次动态创建或移除元素，实现元素的显示和隐藏。
注释： v-if 也可以像原生 js 一样搭配 v-else-if 和v-else来使用

 <:如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要展示出来，此次 v-if 的性能更好。

2.v-show:的原理是动态为元素添加或者移除disolay: none 的样式，是移除样式或者添加样式
。

<:如果要频繁的却换元素的的显示状态，用v-show 性能会更好。

<div id="app">
             //networKState 是定义的一个变量 当networKState === 200 的时候元素显示
    <p v-if="networKState === 200">请求成功 --- 被 v-if 控制</p>
    
    <p v-show="networKState === 200">请求成功 --- 被 v-if 控制</p>

列表渲染指令

1…v-for :通常用来给数组进行遍历。

  <div id="app">
        <!-- 官方建议：只要使用了v-for 指令，那么一定要绑定一个 :key 属性 -->
        <!-- 并且 尽量把 id 作为 key 的值 -->
        <!-- key 的值只能是字符串 或者数字类型 -->
        <!-- item不是固定值可以自己定义 in 后面的是数组 -->
        <!-- key 的值不能重复，否则会报错 -->
        <ul v-for="(item,index) in list" :key="item.id" :title="item.nane">
            <li>{{item.id}} - {{ item.nane}} - {{index}}</li>
        </ul>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      const vm=new Vue({
          el:'#app',
          data: {
              list:[
                  {id:1, nane:'张三'},
                  {id:2, nane:'李四'},
                  {id:2, nane:'王五'}
              ]
          }
      })
    </script>

注意：在进行列表渲染时，尽量为渲染的每一项绑定 key 属性。建议尽可能在使用 v-for 时提供 key attribute。
v-if 与 v-for 一起使用：

不推荐同时使用 v-if 和 v-for。

当在同一个节点中同时使用 v-if 与 v-for 时：

vue2.x：v-for 的优先级高于 v-if

vue3.x：v-if 的优先级高于 v-for

插槽

v-slot ：在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置，没有对应值的其他内容会被放到子组件中没有添加name属性的slot中
其它：
v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示原始 Mustache 标签。
<div v-pre>{{product}}
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once：一次

Ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向computed组件。
ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
示例：

<body>
<div id="app">
    <input ref="input"><br>
    <button @click="focus()">点击获取焦点</button>
    /*点击按钮时上面文本框获得焦点*/
</div>
<script src="../libs/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        methods:{
            focus(){
               this.$refs.input.focus()
            }
        }
    })
</script>