Vue1-43

最新推荐文章于 2024-10-16 18:35:07 发布

l20040121_

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量198

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/l20040121_/article/details/128925912

版权

Vue的基础原理：拦截

Object.definedProperty方法进行拦截

var obox=document.getElementById("box");
        Object.defineProperty(obj,"myname",{
        //获取元素则执行
            get(){
                return obox.innerHTML
            },
           //修改元素则执行
            set(value){
                console.log("set",value)
                obox.innerHTML=value
            }
        })

模板语法

指令：是带有v-前缀的特殊属性
v-bind 动态绑定属性
v-if 动态创建/删除,用来控制切换元素是否显示或隐藏类似if,还有v-else,v-else-if一般情况下一起使用
v-show 动态显示/隐藏
v-on 绑定事件
v-for 遍历，用来渲染列表，语法：v-for=“(item,index) in/of data”
v-model 双向绑定表单
v-html 针对纯HTML，将标签元素的效果展示。
缩写：
v-bind:src->:src
v-on:click->@click
切换样式：

 <style>
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        {{myname}}-{{myage}}
        <div :class="isColor?'red':'yellow'">换背景颜色</div>
        <button @click="handleChange()">change</button>
    </div>
    <script>
       new Vue({
        el:"#box",
        data:{
            myname:"xiaoming",
            myage:12,
            
            isColor:true
        },
        methods:{
            handleChange(){
                this.myname="hong",
                this.myage=100
                
                this.isColor=!this.isColor

            }
        }
       })
    </script>

todolist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../code/lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext"/>
        <button @click="handleAdd()"></button>
        <ul v-show="datalist.length">
            <li v-for="(data,index) in datalist">
                {{data}}
                <button @click="handleDel(index)">del</button>
            </li>
        </ul>
        <div v-show="!detalist.length">daiban</div>
</div>
    <script>
        var vm= new Vue({
            el:"#box",
            data:{
                datalist:["111","222","333"],
                mytext:"aaa"
            },
            methods:{
                handleAdd(){
                    this.datalist.push(this.mytext)
                    this.mytext=""
                },
                handleDel(index){
                    this.datalist.splice(index,1)
                }
            }


        })
    </script>
</body>
</html>

点击变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../code/lib/vue.js"></script>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist" :class="current===index?'active':''" @click="handleClick(index)">
                {{data}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:["1","2","3"],
                current:0
            },
            methods:{
                handleClick(index){
                    this.current=index
                }
            }
        })
    </script>
</body>
</html>

class与style

vue2
不支持动态增加属性的拦截
解决方案：Vue.set(obj,属性,true)
Vue3
支持动态增加属性的拦截
Vue3语法：Vue.createApp(obj).mout(“#box”) || Vue.createApp({ }).mout(“#box”)

条件渲染

1.v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
2.v-else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
3.v-else-if
v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
4.v-show
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

列表渲染

列表的渲染一般情况下，基本原理是使用了虚拟建立的DOM节点

key：
跟踪每一个节点，从而重用和重排现有元素,减少空间时间浪费一般创建列表是建议都加上key值：id data.id
数组更新检测：
1.使用以下方法操作数组，可以检测变动
push()、 pop（）、shift()、 unshift、 splice（）、sort（) 、reverse()
2.filter（),concat()和 slice() ,map),新数组替换旧数组
3.能检测以下变动的数组
vm.items[indexOfltem]=newValue

模糊查询

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <table>
        <thead>
          <tr>
            <td>名字</td>
            <td>年龄</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in fillist" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          keyWord:'',
          list:[
            { name: '张三', age: '18' },
            { name: '张四', age: '17' },
            { name: '张五', age: '17' },
            { name: '老六', age: '18' },
            { name: '老八', age: '18' }
          ]
        },
        computed:{
          fillist(){
            // 返回过滤后的数组
            return this.list.filter((p)=>{
              return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
            })
          }
        }
      })
    </script>
  </body>
</html>

事件处理

  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
  <script>

    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })
  </script>

(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名handleClick
(3）内联处理器方法-执行函数表达式handleClick($event) $event事件对象
(4)事件修饰符https://cn.vuejs.org/v2/guide/events.html
.stop 防止事件冒泡，加在子元素上
.prevent
.capture
.self 防止事件冒泡，加在父元素上
.once

案件修饰符

.esc
.up
.down
.left
.right
.space
.ctrl
.shift
.delete

表单控件绑定

通过v-model自己的保存,判断真假,从而实现记住用户名

计算属性

1.data -> 状态，被拦截。
2.方法 ->事件绑定，逻辑运算，可以不用return，没有缓存，每次相同调用，都要执行一次
3.计算属性（重视结果）->解决模板过重的问题，必须有return，只求结果，有缓存，同步，每次相同调用，只执行一次
4.watch（重视过程），监听一个值的改变。不用返回值，异步同步。

组件定义

取名:js驼峰,html连接符1-
DOM片段没有代码提示没有高亮显示-vue单文件组件解决
css只能写成行内,-vue单文件组件解决
template包含一个根节点
组件无法直接访问外面的组件状态方法
自定义组件必须是一个函数

父传子

Vue.component("navbar",{
	props:["myname"],
	this.myname
	template:<div>
		<button>left</button>
		<span>{{myname}}</span>
		<button>right</button>
	<div>
})

子传父

Vue.component("navbar",{
	template:`
		<div style="background-color:red;">
			<button @click="handleClick()">点击</button>
		</div>
	`,
	method:{
		handleClick(){
			this.$emit("myevent")
		}
	}
})