Vue.js——60分钟快速入门-注意点

  • Z时代
  • 2024-01-10
  • 分类：综合

vue


ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。


那么具体的哪里指的是View，ViewModel，Model？

	<!--这是我们的View-->
        <div id="app">
            {{ message }}
        </div>

	// 这是我们的Model
        var exampleData = {
            message: 'Hello World!'
        }

	// 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。


步骤:

1、定义View

2、定义Model

3、创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。


指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

内置指令

v-once      能执行一次性地插值，当数据改变时，该插值处的内容不会更新。   

       <p v-once="a">{{a}}</p>,data{a:1}      渲染为<p>1</p>

v-html     输出真正的 HTML     

        <p v-html="div_tag"></p>,data{div_tag:"<div>div</div>"}    渲染为<p><div>div</div></p>

v-if指令                        根据条件展示元素

       <p v-if="seen">Now you see me</p> data{seen:true}   渲染为<p>Now you see me</p>

       v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。

v-show指令            根据条件展示元素   

v-else指令           根据if条件的真假 的取反来展示元素   注意:要跟在绑定v-if指令元素的后面

v-for指令             根据一组数组的选项列表进行渲染   <li v-for="(item, index) in items">   下标为{{index}}的元素是{{item}}</li>

             上面不用绑定元素属性,下面的要绑定元素属性

v-bind指令   一些指令能接受一个“参数”，在指令后以冒号指明。例如，v-bind 指令被用来响应地更新 HTML 属性   /**给元素绑定属性值，绑定的属性会留下来**/     数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。

         <a  v-bind:class="haha"></a>  vm.data:{haha:"xixi"}--->页面渲染<a class="xixi"></a>   缩写方式可以写成<a  :class="haha"></a>

            <a v-bind:href="url"></a>     在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

        <button v-bind:a="someDynamicCondition">Button</button>,data{someDynamicCondition:true}  渲染为

<button a="disabled">Button</button>

        <div v-bind:class="{ active: isActive }"></div>,  data{isActive:true}   渲染为 <div class="active"></div>  表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

        <div class="static"     v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>  ,data {

isActive:true,hasError:false}  渲染为 <div class="active"></div>    v-bind:class 指令可以与普通的 class 属性共存。

        <div v-bind:class="[activeClass, errorClass]">,   data: {  activeClass: 'active',  errorClass: 'text-danger'}  渲染为<div class="active text-danger"></div>     把一个数组传给 v-bind:class ，以应用一个 class 列表

        <div v-bind:class="[isActive ? activeClass : '', errorClass]"> ，data:{isActive :true}   渲染为 <div class="activeClass"></div>    用三元表达式


v-on指令  v-on:click="事件名"    监听元素的点击事件   <button @click="事件名"></button>


/**通过computed属性知道:并不是所有数据都要绑定在data对象中的,它可以从data对象获取属性操作得到另一个想要的值。**/   Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，依赖于 vm.reversedMessage 的绑定也会更新。
减少(view)模板中的逻辑代码则使用计算属性.
使用计算属性和methods的比较:
  不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。希望有缓存则用computed属性;希望有缓存，请用 method 替代。


v-if   

       <p v-if="seen">Now you see me</p>         //seen值为true只能显示一句

      那么想显示多句的话:   把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

       <template

v-if="ok">  

             <h1>Title</h1>  

             <p>Paragraph 1</p>  

            <p>Paragraph 2</p>

        </template>

      渲染最终效果:

     <h1>Title</h1>  

             <p>Paragraph 1</p>  

            <p>Paragraph 2</p>


v-show  

     不同的是1、有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 

2、注意 v-show 不支持 <template> 语法。

    总的来说:一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

关于v-for

用带有 v-for 的 <template> 标签来渲染多个元素块

     <template v-for="item in items">    

            <li>{{ item.msg }}</li>    

            <li class="divider"></li>  

     </template>

     渲染为:

      <li>msg1</li> <li class="divider"></li><li>msg2</li> <li class="divider"></li><li>msg3</li> <li class="divider"></li>

       

  <div v-for="(value, key, index) in object">  {{ index }}. {{ key }} : {{ value }}</div>   //value指的是对象属性,key指对象键名   index指对象下标

   <span v-for="n in 10">{{ n }}</span>  //n的取值从1-10


组件和v-for

     不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props 。不自动注入 item(从父模板中使用组件中的传的数组元素) 到自定义组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。

以上是 Vue.js——60分钟快速入门-注意点 的全部内容， 来源链接： utcz.com/z/376634.html

回到顶部