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

vue

一.vue3介绍

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

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

1. 官网初识

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令_第1张图片

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

https://cn.vuejs.org/

2.环境搭建

2.1线上尝试

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令_第2张图片

2.2CDN使用

通过 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应用背后的真相
  1. 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>
    
  2. 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模版语法
  1. 最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法(即双大括号)

      {{myName}}
    

    双大括号会被替换为相应组件实例中myName属性的值,同时每次myName属性更新时他也会同步更新

  2. 双大括号不能在 HTML attributes (属性)中使用。想要响应式地绑定一个 attribute(属性),应该使用 v-bind 指令:

    <div v-bind:id="dynamicId">div>
    

    v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined,那么该 attribute 将会从渲染的元素上移除。

  3. 表达式的支持

    {{ number + 1 }}
    
    {{ ok ? 'YES' : 'NO' }}
    
    {{ message.split('').reverse().join('') }}
    
    <div :id="`list-${id}`">div>
    
  4. 指令

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

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令_第3张图片

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>Documenttitle>
    <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 会更合适。

 
  • {{item.title}}
    未付款
    未发货
    已发货
    已完成
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'
    }
  }
}
  • {{ value }}

初认识vue,v-for,v-if,v-bind,v-model,v-html等指令_第4张图片

你可能感兴趣的:(vue.js,html,前端)