Vue 2.0入门基础知识之内部指令详解

网络编程 2024/9/22 佚名

3 1 2

1.Vue.js介绍

当前前端三大主流框架：Angular、React、Vue。React前段时间由于许可证风波，使得Vue的热度蹭蹭地上升。另外，Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具，与其说是一个MVVM框架，不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程，即保持状态和视图的同步，状态也可以说是数据吧；而其组件化的理念与React则一样，即“一切都是组件，组件化思想方便于模块化的开发，是前端领域的一大趋势。

2.内部指令

2-1.v-if v-else v-show：前两者一般配合使用，v-show的效果类似于v-if。

实例如下：

<body>
  <div id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

DOM结构中，三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时，if和show都会显示，else也不会存在于DOM结构中。v-if和v-show的不同体现在：v-if是根据条件的值判断是否加载，可以减轻服务器的压力，但是缺点是当改变条件的值，页面又要加载一次；v-show则无论条件的值是否为true，都会加载（若条件为true，则display属性设置为其默认属性，反之，设置为none）

2-2.v-for 循环指令

实例如下：

<body>
  <div id="app">
   <ol>
     <li v-for="b in b">{{b}}</li>
   </ol>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>

页面会显示5个li，插值的效果是li会显示与数组b一一对应的元素，v-for有点类似于for in循环

2-3 v-text v-html 文本（html字符串）指令

<body>
  <div id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中国</span>"
    }
  });
</script>

可以联想到jquery的text()、html()。到现在，你会发现前面都是利用插值操作，即{{}}，这种做法会在一定程度上影响性能。

2-4 v-on 绑定事件监听器

实例如下：

<body>
  <div id="app">
   <button v-on:click="Hi()">Button</button>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>

同理，类比jquery的on()方法，绑定事件用的，实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作，如mouseout、mouseover等等。

2-5 v-bind指令

实例如下：

<body>
  <div id="app">
    <a v-bind:style="{color:'red'}" :src="/UploadFiles/2021-04-02/message">

效果为a标签显示红色，且其src属性为vm.message。v-bind指令主要用于设置html标签的属性，其简写形式为 v-bind：——>：
2-6 v-model 数据双向绑定指令
实例如下：


<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>


当input输入的值发生变化时，p标签包含的内容也会随之变化，且与前者保持一致。
2-7 v-pre 指令
实例如下：


<body>
  <div id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>


第一个p标签输出“前端工程师”，而第二个p标签则会跳过vue编译，输出原始值，即{{message}}。
2-8 v-cloak指令
     v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用
2-9 v-once指令
    v-once指令的作用是只有当DOM树第一次渲染时起作用。
总结
以上所述是小编给大家介绍的Vue 2.0入门基础知识之内部指令详解，希望对大家有所帮助！

Vue,2.0,基础知识,vue,内部指令

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Vue 2.0入门基础知识之内部指令详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

Vue 2.0入门基础知识之内部指令详解

web前端开发中常见的多列布局解决方案整理(一定要看)

JS中的多态实例详解

评论“Vue 2.0入门基础知识之内部指令详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接