Vue学习

最新推荐文章于 2024-11-09 21:44:05 发布

GGJJM

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量1.6k

点赞数 23

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79390585/article/details/141873547

版权

概述

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

特点

Vue的核心是一个响应的数据绑定系统，它通过把标签和数据绑定来简化用户的操作，Vue会在我们标签和数据任何一方进行改变时对双方进行数据的修改来保证数据的一致性。Vue还可以使用各种各样的简单的指令来完成原本使用dom非常复杂的操作。

基本操作

通过script进行添加Vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

绑定

在新建Vue对象时可以根据html中的id或样式对指定的样式进行绑定。

    <div id="app">

    </div>
</body>
<script>
    new new Vue({
        el:"#app",
        data() {
            return {
                
            }
        }
    })
</script>

文本渲染

只要在{{}}中添加data中的数据名称就行了，{{}}中可以是对象或表达式但不能是语句。（例如for）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
</body>
<script>
    new new Vue({
        el:"#app",
        data() {
            return {
                message:"123"
            }
        }
    })
</script>
</html>

指令

1. `v-for` 指令

用法: v-for="(todo, i) in todos" :key="todo.id"
功能: 用于在模板中循环遍历数组或对象。i 是索引，todo 是数组中的每一个元素。:key 是一个唯一的标识符，用于帮助 Vue 跟踪每一项，从而优化渲染性能。

2. `v-model` 指令

用法: v-model="text" 和 v-model="sum"
功能: 用于在表单控件元素（如输入框）和 Vue 实例的数据之间进行双向绑定。当数据发生变化时，视图会更新，反之亦然。

3. `v-bind` 指令

用法: v-bind:href="link" 和 :src="img" 和 :style="{width: w}"
功能: 用于绑定 HTML 元素的属性。v-bind 可以用于绑定 href、src、style 等属性，使它们与 Vue 实例的数据动态绑定。可以使用简写 : 替代 v-bind:。

4. `v-html` 指令

用法: v-html="html"
功能: 将 HTML 字符串插入到元素中，渲染成 HTML 元素。注意，这可能会引入 XSS 攻击的风险，因此要确保插入的 HTML 是安全的。

5. `v-if` 指令

用法: v-if="flag"
功能: 条件渲染。只有当 flag 为 true 时，这个元素才会被渲染到 DOM 中。如果 flag 为 false，这个元素及其子元素都不会被渲染。

6. `v-show` 指令

用法: v-show="flag"
功能: 根据条件显示或隐藏元素。即使 flag 为 false，元素仍然会被渲染到 DOM 中，只是通过 CSS 的 display 属性进行隐藏。

7. `v-else` 指令

用法: v-else
功能: 用于与 v-if 配合使用，作为 v-if 的“else”分支。当 v-if 的条件为 false 时，这个元素会被渲染。

8. 事件监听指令 (`v-on` 和 `@`)

用法: v-on:click="addNumber" 和 @click="number -= 1" 和 @click="addtodo"
功能: 用于监听 DOM 事件，并在事件触发时调用 Vue 实例中的方法。v-on 可以简写为 @。

9. `v-for` 的简写

用法: v-for="todo in todos" :key="todo.id"
功能: v-for 的简写形式，适用于简单的遍历。省略了索引 i 的情况，仅遍历数组的每一项 todo。

10. `:` 的简写

用法: :src="img" 和 :style="{width: w}"
功能: : 是 v-bind: 的简写，用于绑定属性的值。

这些指令共同实现了 Vue.js 的数据绑定、条件渲染、循环渲染和事件处理等功能，使得 Vue.js 在构建动态、响应式用户界面时变得非常高效和简便。

总示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <p>{{message}}</p>                  <!-- 纯文本渲染 -->
            <li v-for="(todo,i) in todos":key="todo.id">        <!-- 数组遍历，i为索引，可以简写改为v-for="todo in todos":key="todo.id" -->    
                <input type="checkbox">                         <!-- 当操作中对对应数据进行标记时，如果增加数据会发生标记不会变的情况， -->
                                                                <!-- 如果加上:key="每一个数据为一的键值"那么标记就会跟着数据位置的改变而改变 -->
                索引为：{{i}},数据为：{{todo.id}},{{todo.text}}
            </li>
        </ul>
        <input type="text" v-model="text">                      <!-- 对数据进行双向绑定，input数据改变可以影响vue中的数据，vue数据改变也可以影响input中的数据 -->
        <button @click="addtodo">添加</button>
        <p v-html="html"></p>
        <a v-bind:href="link">{{message}}</a>       <!-- 属性绑定 -->
        <img :src="img" :style="{width:w}" >        <!-- 可简写v-bind -->
        <p>{{number+1}}</p>                         <!-- 可以写数据表达式或者变量但是不可以写语句（例如for） -->
        <span>{{number}}</span>
        <button v-on:click="addNumber">+1</button>  <!-- 使用Vue对按钮添加点击方法 -->
        <button @click="number-=1">-1</button>      <!-- 可简写v-on: -->
        <p v-if="flag">v-if:true</p>                <!-- 如果为false这个标签都不会被创建 -->
        <p v-show="flag">v-show:true</p>            <!-- 无论如何标签都会被创建只会被使用css样式中的display进行隐藏 -->
        <button @click="flag=!flag">改变flag</button>
        <input v-model="sum">   
        <span v-if="sum>=5">你输入的数字>=5</span>  <!-- if else的使用 -->
        <span v-else>你输入的数字<5</span>
        <p v-text="allToDos"></p>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message:"123",
                todos:[
                    {id:1,text:"你好"},
                    {id:2,text:"我不好"},
                    {id:3,text:"真的吗？"}
                ],
                nextid:4,
                text:"",
                html:"<p>123</p>",
                link:"http://www.baidu.com",
                img:"值日名单.png",
                w:'100px',
                number:1,
                flag:true,
                sum:1,
            }
        },
        methods: {
            addNumber(){
                this.number+=1;
            },
            addtodo(){
                this.todos.unshift({id: this.nextid,text:this.text});       //创建一个todos数组样式的数据并插入到数组的最前面
                this.nextid++;
                this.name="";
            }
        },
        computed:{
            allToDos(){
                let temp=this.todos.reduce((sum,item)=>sum+item.text,"");
                return temp;
            }
        }
    })
</script>
</html>

Vue对象中的属性

在 Vue 对象中，你可以定义以下几个主要部分：

1. `data`:

- 用于存储组件的响应式数据。
- 数据会被 Vue 观察，当数据变化时，视图会自动更新。
- 例如：

data() {
  return {
    message: 'Hello, Vue!',
    count: 0
  };
}

2. `methods`:

- 用于定义组件的方法，可以在模板中调用这些方法，或在组件内部进行逻辑处理。
- 例如：

methods: {
  increment() {
    this.count++;
  },
  greet() {
    alert(this.message);
  }
}

3. `computed`:

- 用于定义计算属性，它们是基于 Vue 实例的响应式数据的计算值。
- 计算属性会缓存，只有在相关数据发生变化时才会重新计算。
- 例如：

computed: {
  doubledCount() {
    return this.count * 2;
  }
}

4. `watch`:

- 用于观察数据的变化，并在数据变化时执行相应的代码。
- 可以用于数据变化时执行异步操作或其他副作用。
- 例如：

<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="message--">-1</button>
        <button @click="message++">+1</button>
    </div>
</body>
<script>
    new new Vue({
        el:"#app",
        data() {
            return {
                message:0
            }
        },
        watch:{
            message(newValue,oldValue){
                alert(newValue+","+oldValue);
            }
        }
    })
</script>

5. `props`:

- 用于定义组件可以接收的属性（即从父组件传递给子组件的数据）。
- 例如：

props: {
  title: String,
  age: {
    type: Number,
    default: 18
  }
}

6. `components`:

- 用于注册局部组件，使其在当前组件模板中可用。
- 例如：

components: {
  ChildComponent
}

7. `directives`:

- 用于注册自定义指令，扩展 HTML 元素的功能。
- 例如：

directives: {
  myDirective: {
    bind(el, binding, vnode) {
      el.style.color = binding.value;
    }
  }
}

8. `filters` (在 Vue 3 中不再推荐使用，建议使用计算属性或方法):

- 用于定义自定义的格式化函数，可以在模板中使用。
- 例如：

filters: {
  uppercase(value) {
    return value.toUpperCase();
  }
}

9. `mixins`:

- 用于在多个组件之间共享逻辑。定义了 mixin 对象后，可以将其混入到组件中。
- 例如：

mixins: [myMixin]

10. 生命周期钩子:

- 用于在 Vue 实例的不同生命周期阶段执行代码。
- 常用钩子包括 created, mounted, updated, destroyed。
- 例如：

created() {
  console.log('Component is created');
},
mounted() {
  console.log('Component is mounted');
}

这些部分构成了 Vue 组件的基础，使其能够灵活地管理组件的状态、逻辑和模板。

GGJJM

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue学习

概述

特点

基本操作

通过script进行添加Vue

绑定

文本渲染

指令

1. v-for 指令

2. v-model 指令

3. v-bind 指令

4. v-html 指令

5. v-if 指令

6. v-show 指令

7. v-else 指令

8. 事件监听指令 (v-on 和 @)

9. v-for 的简写

10. : 的简写

总示例

Vue对象中的属性

1. data:

2. methods:

3. computed:

4. watch:

5. props:

6. components:

7. directives:

8. filters (在 Vue 3 中不再推荐使用，建议使用计算属性或方法):

9. mixins: