初认识vue,v-for,v-if,v-bind,v-model,v-html等指令

最新推荐文章于 2024-04-18 14:17:59 发布

qq_46372132

最新推荐文章于 2024-04-18 14:17:59 发布

阅读量990

点赞数 1

文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/qq_46372132/article/details/134385790

版权

vue

一.vue3介绍

1.为什么data是函数而不是对象?

因为vue是组件开发,组件会多次复用,data如果是对象,多次复用是共享,必须函数返回一个新的对象

1. 官网初识

在这里插入图片描述

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

https://cn.vuejs.org/

2.环境搭建

2.1线上尝试

在这里插入图片描述

2.2CDN使用

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

2.3 Vue CLI(不太使用)

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

2.4 Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

要使用 Vite 来创建一个 Vue 项目，非常简单：

$ npm init vue@latest

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

二.vue3基础

1.模版语法

1-1我的第一个应用

<div id="box">
    {{10+20}}//30
    {{myName}}//yiling
</div>
<script>
	var obj={
        data(){
            return{
                myName:'yiling'
            }
        }
    }
    var app=Vue.createApp(obj).mount("#box")
</script>

推荐使用的 IDE 是 VSCode，配合 Vue 语言特性 (Volar) 插件。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。
Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。

1-2应用背后的真相

object.defineProperty

缺陷:无法监听数组的变化,无法监听class的改变,无法监听Map Set结构

<div id="box">
    
</div>
<script>
	var obj={}
    var oBox=document.getElementById("box")
    Object.defineProperty(obj,'myname',{
        get(){
                console.log("get");
            },
            set(value){
                console.log("set",value);
                // 操作dom
                oBox.innerHTML=value
            }
    })
</script>

proxy

var obj = {

}
var obox = document.getElementById("box")

var vm = new Proxy(obj, {
    get(target, key) {
        console.log("get")
        return target[key]
    },
    set(target, key, value) {
        console.log("set")

        target[key] = value
        obox.innerHTML = value
    }
})


/*
            vue3 基于Proxy ,ES6 Proxy ,
              if(支持proxy){
                  // proxy进行拦截处理， 实现功能
              }else{
                  // object.defineProtery
              }

        */

1-3模版语法

最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法(即双大括号)
```
  {{myName}}
```
双大括号会被替换为相应组件实例中myName属性的值,同时每次myName属性更新时他也会同步更新
双大括号不能在 HTML attributes (属性)中使用。想要响应式地绑定一个 attribute(属性)，应该使用 v-bind 指令：
```
<div v-bind:id="dynamicId"></div>
```
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

表达式的支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

指令

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

1-4Todolist案例

<!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="./vue.js"></script>
</head>
<body>
   <div id="box">
   		<input type="text" v-model='val'><button @click="add()">添加 </button>
       <ul>
           <li v-for="item,index in todos">
           		{{item}}
               <button @click="del(index)">
                   删除
               </button>
           </li>
       </ul>
      <div v-show="todos.length==0">
          暂时没有待办事项
       </div>
   </div>
    <script>
        var obj={
            data() {
                return {
               		val:'',
                    todos:[]
                }
            },
            methods:{
                add(){
                    if(this.val.trim()!==''){
                        this.todos.push(this.val.trim())
                        this.val=''
                    }
                },
                del(index){
                    this.todos.splice(index,1)
                }
            }
          
        }
        var app=Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>

1-5点击变亮案例

<!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="./vue.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    
    <div id="box">
       <ul>
           <li v-for="item,index in list" :class="current==index?'active':''" @click="add(index)">
               {{item}}
           </li>
        </ul>
    </div>
    <script>
        var obj={
            data() {
                return {
                    current:0,
                   list:['电影','影院','我的']
            }},
            methods: {
                add(index){
                   this.current=index
                }
            },
        }
        
        var app=Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

1-6 v-html模版陷阱

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

在这里插入图片描述

2.class与style

class对象与数组写法

<!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="./vue.js"></script>
</head>
<body>
    <div id="box">
        <div :class="objClass">动态切换class--对象</div>
        <div :class="arrClass">动态切换class--数组</div>
    </div>
    <script>
        var obj={
            data() {
                return {
                    // vue2不支持,后来添加新属性
                    // vue3支持
                    objClass:{
                        aaa:true,
                        bbb:false,
                        ccc:true
                    },
                    arrClass:['aaa','bbb','ccc']
                }
            },
        }
        var app=Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

style对象与数组写法,同上

把class改成style

3.条件渲染

3-1 条件渲染-生或死的选择

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

 <ul >
     <li v-for="item,index in datalist">
    	 {{item.title}}
         <div v-if="item.state===0">
         	未付款
         </div>
         <div v-else-if="item.state===1">
         	未发货
         </div>
         <div v-else-if="item.state===2">
         	已发货
         </div>
         <div v-else>
         	已完成
         </div>
     </li>
</ul>


datalist:[
    {
        state:0,
        title:"111"
    },
    {
        state:1,
        title:"222"
    },
    {
        state:2,
        title:"333"
    }
]

4.列表渲染

4-1 v-for列表渲染 - 影分身术

v-for与对象

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

在这里插入图片描述

<ul >
    <template v-for="{title,state},index in datalist" >
		<li v-if="state===1">{{title}}</li> 
    </template>
</ul>

qq_46372132

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初认识vue,v-for,v-if,v-bind,v-model,v-html等指令

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令
复制链接

扫一扫

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令

vue

一.vue3介绍

1.为什么data是函数而不是对象?

1. 官网初识

2.环境搭建

2.1线上尝试

2.2CDN使用

2.3 Vue CLI(不太使用)

2.4 Vite

二.vue3基础

1.模版语法

1-1我的第一个应用

1-2应用背后的真相

1-3模版语法

1-4Todolist案例

1-5点击变亮案例

1-6 v-html模版陷阱

2.class与style

3.条件渲染

3-1 条件渲染-生或死的选择

4.列表渲染

4-1 v-for列表渲染 - 影分身术

“相关推荐”对你有帮助么？