DayOne-Vue的基本使用指令以及过滤器

一、Vue

1、什么是Vue

Vue是一个流行的JavaScript框架，用于构建用户界面。它被设计成渐进式的，可以逐步应用到现有的项目中，也可以构建全新的应用。Vue的核心库只关注视图层，因此易于集成到其他库或现有项目中。Vue具有响应式和组件化的特性，使得开发者可以更轻松地管理和维护复杂的用户界面。Vue也提供了许多附加工具和插件，例如Vue Router和Vuex，以便开发者可以更好地管理路由和状态。Vue的易用性和灵活性使得它成为构建现代Web应用程序的一种流行选择。

2、Vue特性

2.1、数据驱动视图

    • 数据的变化会驱动视图自动更新
    • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2.2、双向数据绑定：

在网页中，form 表单负责采集数据，Ajax 负责提交数据。

  • js 数据的变化，会被自动渲染到页面上
  • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

 二、Vue指令

1、内容渲染指令

v-text：它会覆盖掉元素中默认的值

<body>
    <div id="app">
        <h1 v-text="dataname">内容渲染指令</h1>
    </div>
</body>
    <!-- 导入Vue的库文件 -->
    <script src="../js/vue.js"></script>
    <script>
        // 创建Vue的实例对象
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#app',
            data:{
                dataname: '内容渲染指令'
            }
        })
    </script>

{{ 内容 }}： 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！ 

<body>
    <div id="app">
        <h1>{{dataname}}</h1>
    </div>
</body>
    <!-- 导入Vue的库文件 -->
    <script src="../js/vue.js"></script>
    <script>
        // 创建Vue的实例对象
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#app',
            data:{
                dataname: '插值表达式'
            }
        })
    </script>

 v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！ 

<body>
    <div id="app">
        <h1>{{dataname}}</h1>
        <p v-html="htmlpp"></p>
    </div>
</body>
    <!-- 导入Vue的库文件 -->
    <script src="../js/vue.js"></script>
    <script>
        // 创建Vue的实例对象
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#app',
            data:{
                dataname: '插值表达式',
                htmlpp: '<h5 style="color: red;">我想插入一个标签</h5>'
            }
        })
    </script>

2、属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

  • 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；

  • 简写是英文的 :

  • 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

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

 3、事件绑定指令

1、v-on：可以简写为@

2、语法格式为

<button @click="add">

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
   }
}

 4、事件修饰符

 5、按键修饰符

6、v-model 指令的修饰符

5、条件渲染指令

  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好

  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

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

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

 

v-if 指令在使用的时候，有两种方式：

  1. 直接给定一个布尔值 true 或 false

    <p v-if="true">被 v-if 控制的元素</p>

  2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

    <p v-if="type === 'A'">良好</p>

 

posted @ 2023-04-04 17:35  CYF0913  阅读(30)  评论(0)    收藏  举报