Vue 入门

我心飞翔 分类:javascript

Vue入门

渡劫,vue入门

What`s vue?

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    这是官网对vue的介绍,说实话每个字我都认识,但是我不理解,这算是个问题,入门以后再看吧。

How to use?

入门
  • vue的入门代码很简单,如下:
<div id='app'>
    {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello vue!"
        }
    });
</script>
 
  • 这段看起来只是渲染字符串的代码,其实已经包含了vue的核心。vue的核心是允许采用简介的模板来声明式的将数据渲染进DOM,此时数据和DOM已经建立起了关联,所有的东西都是响应式的。

  • 在控制台中,对数据的修改都会实时的显示到页面上:

    image.png

  • 什么是指令

    • 在vue中提供了很多,v-xxx的属性,称为指令,以表示它们是VUE提供的特殊attribute,每个指令都有不同的作用,下面会列举一些常见的。
      • v-bind, <span v-bind:title="message"> -> 表示vue的message属性绑定到span title的属性,随着message的变化,span tittle也会随着变化;
      • v-if,<p v-if="seen">现在你看到我了</p> -> 判断;
      • v-for, <li v-for="todo in todos"> -> 循环;
      • v-on,<button v-on:click="reverseMessage">反转消息</button> -> 监听,比如click/blur,等等;
      • v-model,<input v-model="message"> -> 实现与表单的双向绑定;
  • 什么是组件

    • 组件的特点:小型,独立,通常可以复用。
    • 下面先看一个demo
    <div id='app1'>
        <ol>
            <demo
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
            ></demo>
        </ol>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('demo', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            }
        )
    
        const app = new Vue({
                el: '#app1',
                data: {
                    groceryList: [
                        {id: 0, text: '蔬菜'},
                        {id: 1, text: '奶酪'},
                        {id: 2, text: '随便其它什么人吃的东西'}
                    ]
                }
            }
        )
    </script>
     
    1. 首先先定义好组件,'demo'是组件的名称,定义好以后就可以直接在标签中引用,props是Vue自定义的属性,用于其他地方调用组件时传入动态的参数,template是组件展示的内容;
    2. 引用组件后,可以使用指令对组件进行渲染。

    el的id不知道为什么我在两个页面写的,但相同以后还是出了问题

    • 至此就定义了一个可以动态变化的组件;

回复

我来回复
  • 暂无回复内容