今天的码农女孩做了关于vue语法与关键字的笔记

语法与关键字
     <div id="app">{{str}} {{str}} {{str}}</div>
      var v=new Vue({
            el:"#app",//获取标签节点
            data:{//定义变量
                str:"hello"
            },
            methods:{//定义函数
                
            }
        })
关键字：
模板：在页面上要渲染vue的标签，例如：div
挂载点：用来渲染js代码的标签叫挂载点，例如：el操作的标签
实例：用来创建vue对象，例如：new Vue()
数据：在vue下定义的变量都放在data属性里
函数：自己创建的函数体都放在methods里
插值表达式：用来调用vue下的变量和函数，例如：{{str}}

插值表达式：
{{str}}输出变量  {{1+3+4}}定义表达式  {{str.replace("o","#")}}调用函数 {{str=="hello"?'yes':'no'}}定义三元表达式
指令：
1.v-text 操作文本内容
2.v-html 操作文本和标签
3.v-bind 动态绑定属性
        <img :src="url">简写
        <img v-bind:src="url">
4.v-model 双向绑定
5.v-on 绑定事件
    <h1 v-on:click="fun()">{{str}}</h1>
    methods:{
                fun:function(){
                    alert("函数执行")
                }
            }
6.v-show 显示隐藏元素
7.v-if v-else-if v-else 判断指令
        <p v-if="user=='领导'">早上好领导</p>
        <p v-else-if="user=='客户'">早上好客户</p>
        <p v-else>请问找谁</p>
8.v-for 循环指令
        <h2 v-for="i in 10">{{i}}</h2>遍历数字
        <h3 v-for="s in 'jell'">{{s}}</h3>遍历字符串
        <h3 v-for="(v,i) in ['x','c','b']">{{i}}-{{v}}</h3>遍历数组
        <h2 v-for="(item,key) in {name:'lisi',age:23}">{{key}}-{{item}}</h2>遍历对象
v-show和v-if区别：
v-show是设置css的display属性进行隐藏，v-if是删除了标签
v-show标签只编译一次，v-if标签会多次创建和销毁
v-show只用于减少数据渲染，v-if可以做权限判断和动态数据加载
9.v-pre 让某个标签和他的子标签跳过编译 用来减少编译时间
10.v-once 让某个标签和组件只渲染一次
11.v-cloak 让vue实例化后再编译标签

标签：vue,编译,show,标签,关键字,遍历,str,码农
来源： https://blog.csdn.net/m0_64444606/article/details/123420470