vue 学习笔记 (1)－－什么是 vue?

一、什么是 vue?

练习时使用，最新版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产时使用，明确版本号的版本，避免造成不可预见的问题

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

hello world

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,world'
        }
    })
</script>

1.v-指令

v-bind－－绑定属性

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<script>
  var app = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</script>

v-bind是 vue 特有的提供的属性，他会在 dom 上应用一个响应式的操作

打开 console，输入app.message = "hello"，页面会改变内容只显示hello

又或者输入app.message = false，内容会直接不显示

vue 官网例子：

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-if－－控制元素的显示隐藏

刚才写了，通过app.message = false，可以让message代表的内容处于隐藏状态，但是控制的只能是通过v-for引入的内容，无法直接让元素隐藏

其实，vue 中还有一个专门控制元素显示隐藏的指令－－v-if

<div id="app">
  <span v-if="show">
    {{message}}
  </span>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,world',
      show: true
    }
  })
</script>

给元素绑定一个指令v-if = "show"，然后在 data 中控制show的布尔值，true 显示，false 隐藏

同时还有这个功能的指令v-show，根据表达式之真假值，切换元素的display CSS property，也是通过绑定的布尔值来显示隐藏

但是v-if和v-show有些区别

(1) v-if 是控制元素是否渲染最终控制元素的显示隐藏，适用于切换频率低的情况 (2) v-show 不管显示隐藏都渲染，然后通过布尔值绑定display: none属性，适用于切换频率高的情况

注意：v-show不支持<tempalte>元素，也不支持v-else

搭配用法

v-else和v-else-if

可以通过使用v-else达到v-if的效果，必须和v-if搭配使用，比如：

<div v-if="1>2">
  hello
</div>
<div v-else>
  hi
</div>

如果v-if不成立，执行v-else，也就是显示 v-else 里面的内容

是不是有点 javascript 里面if函数的感觉了

v-else-if用法大致一样，必须和v-if和v-else搭配使用

v-for－－遍历数组并显示到页面上

v-for算是 vue 的核心指令之一了把，主要是渲染一个项目列表的

<div id="app">
  <div v-for="item in list">{{item.message}}</div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      list: [
        {message: 'html'},
        {message: 'css'}
      ]
    }
  })
</script>

可以直接把列表数据循环输出

并且在控制台中通过push()还能添加新的列表项

app.list.push({message: "js"})

vue 对数据操作，就是这么神奇

不推荐v-for和v-if同时使用，因为v-for拥有更高的优先级

v-on－－绑定事件监听器

即绑定事件，通过v-on给 div 绑定了一个点击事件，注意，在reverseMessage方法中，我们更新了应用的状态，但是吗诶呀触碰到 dom，直接通过 vue 来进行处理，编写代码时只需要关注逻辑层即可

v-on:click="messagenone"，然后在methods里面写上事件方法

<div id="app">
  <div v-on:click="messagenone" id="demo">{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,wolrd'
    },
    methods: {
      messagenone: function() {
        var demo = document.getElementById('demo');
        demo.innerHTML = ''
      }
    }
  })
</script>

v-model－－数据的双向绑定

vue 还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定

可使用场景：标签 input, select, textarea 和 components

<div id="app">
  <div>{{message}}</div>
  <input type="text" v-model="message">
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,wolrd'
    }
  })
</script>

v-text 更新元素的内容

<div id="app">
    <div v-text="message"></div>
    <div>{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd'
        }
    })
</script>

上面的 div 和下面的 div 内容跟随一致变化

v-html－－更新元素的 innerHTML

不建议使用，在网站上动态渲染 html 是非常危险的，容易导致XXS 攻击，不能用在用户提交的内容上，如果必须使用 v-html，可以考虑通过使用组件来代替

v-pre

跳过绑定的元素和他的子元素的编译，直接显示原始内容

跳过没有指令的节点不进行编译，直接显示内容，会加快页面的响应

v-cloak

在编译没有编译完成之前，模板处于的状态

<style>v-cloak] {
  display: none;
}</style>

<div v-cloak>
  {{message}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
    	message: 'hello,wolrd'
    }
  })
</script>

上述代码表示的含义是，如果网络不好，{{message}}模板代表的hello,world还没有编译成功，此时{{message}}处于隐藏状态，当编译完成，页面直接显示hello,world

v-once－－一次性渲染

绑定该指令的元素及其子元素只会进行一次渲染，之后页面的第二次渲染会将其视为静态资源并跳过，可以用来优化性能

<div id="app">
    <span v-once>{{message}}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd',
        }
    })
</script>

使用场景：表单提交。可防止用户在请求未及时响应时，多次提交~

2.组件化构建应用

组件化也是 vue 的核心机制之一，它允许我们使用小型，可复用的组件来构建大型应用

在 vue 里，一个组件本质上是一个拥有预定义选项的一个 vue 实例。在 vue 中注册组件很简单

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

现在可以用它构建另一个组件模板

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个props

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "props"，类似于一个自定义 attribute。
  // 这个 props 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们可以使用v-bind指令将待办项传到循环输出的每个组件中

现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的，我们也需要为每个组件提供一个key

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过prop接口与父单元进行了良好的解耦。我们现在可以进一步改进组件，提供更为复杂的模板和逻辑，而不会影响到父单元

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>