标签：vue 编译 show 标签 关键字 遍历 str 码农

语法与关键字
     <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。