你了解vue吗?你又是从什么地方开始听到过这框架的呢?我是在接触了laravel后才开始关注这么一个框架的!没办法,在开发中我一直试用的是混编模式开发,嗯大概如果你也是这样开发的话你也觉得很累吧.废话少说,我们先来初步学习下吧,后期我尽量坚持一周写篇技术文章进行分享.至于更新的时间只能听天由命了. ps:我也不是什么技术大牛,浮沉在技术圈两年时间了.不求成为什么厉害的人物,只有能做到不忘初心即可.撰写的文章如果有错漏,或者理解有误,欢迎指正交流!

什么是vue?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

上手需要准备神马?

最简单的方式就是像引入JQ一样,通过CDN引入加载吧.这样你就可以好好地根据这篇文章进快乐的玩耍了.

对应的:CDN地址

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

//在我们的学习过程中,不用考虑了,你最好试用第一个CND的链接地址这样你才可以在最短的时间最快的接触

下面:我们将对vue的一些基础应用和特性进行一下简单的说明

声明式渲染

<!--vue直接针对对应的元素节点进行绑定赋值-->
<div id="app">
    {{ message }}
</div>

<script>
//绑定对应ID号的信息
var app = new Vue({
    //元素绑定
    el:"#app",
    data:{
        message:"这是一个演示的信息"
    }
});
</script>

看是吧!其实vue框架最简单的应用就是如此,只需要按照官方所提供的实例化函数,只需要定位对应的元素标签,并对进行指定的数据绑定.即可马上显示你所需的内容.我也难得去截图给你运行的结果了.作为一个求学的你动手打一遍,或者直接cv好了!

#了文本插值，我们还可以像这样来绑定元素特性

<!-- v-bind:绑定对应的属相 可以对指定的元素里对应的属性进行绑定 -->
<div id="app2">
    <span v-bind:title="message">
        这里通过另一种方式进行数据的绑定
    </span>
</div>

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

上面的例子其实就识展示了,通过V-bind绑定了span标签的title元素,同样地如果那你需要绑定不同的标签你可以按照这个例子进行扩展.

条件与循环

很多时候我们在页面渲染中,都会用到判断控制一个元素是否展示,或者有一个列表表格需要你进行渲染.那么这个时候我们在vue框架中就需要用到条件语句或者循环语句了.

#通过v-if指令我们可以对一个元素进行是否显示的操作

<div id="app3">
     <p v-if="seen">这段文字是通过vue的条件属性控制是否可以展示的</p>
 </div>
<script>
    var app3 = new Vue({
        el:"#app3",
        data:{
            seen:true,
        }
    });
</script>

其实逻辑还是很简单的,只不过识通过v-if元素控制的对应值的真假.控制显示,真为显示,假为隐藏!

#v-for 指令可以绑定数组的数据来渲染一个项目列表：

 <div id="app4">
    <ul>
        <li v-for="todo in todos">
        {{todo.id}}  | {{ todo.text }}
        </li>
    </ul>
 </div>
 
<script>
var app4= new Vue({
    el:"#app4",
    data:{
        //这里todos可以由后台返回一个对应的JSON数据集合
        todos:[
            {
                id:"1",
                text:"这是第一行",
            },
            {
                id:"2",
                text:"这是第二行",
            },
            {
                id:"3",
                text:"这是第三行",
            }
        ]
    }
});
</script>

上面的例子,其实就是一个简单的列表循环.todos就是需要循环的列表数据,然后通过v-for进行数据的渲染,具体例子就参考我给出的示例代码吧~

处理用户输入

呃,这个概念其实就是可以通过vue处理下用户输入的数据.简单地举个例子吧~通过点击事件把用户的输入反转~

#v-on 通过添加一个事件监听器例如:下面的代码通过对button绑定一个click事件

<!--处理用户输入-->
<!-- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： -->
   <div id="app5">
    <p>{{message}}</p>
    <button v-on:click="rm">消息反转</button>
   </div>
   
 <script>
    var app5=new Vue({
    el:"#app5",
    data:{
        message:"这个是待反转的信息",
    },
    //methods封装对应需要触发的方法
    methods:{
        rm:function () {
            //当前的元素下的messag
            this.message=this.message.split('').reverse().join('');
        }
    }
});
</script>

如实例代码一样,通过methods方法可以回调触发的函数.接着在函数中去做你想做的事情吧!jsust do it!

#双向绑定v-model

什么是双向绑定?其实就是表单输入和应用状态之间的双向绑定,其中一者的改变另一者都回进行改变!

<!--双向绑定-->
<!-- v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定 -->
<div id="app6">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script>
    var app6=new Vue({
    el:"#app6",
    data:{
        message:"这是数据双向绑定的演示"
    }
})
});
</script>

嗯,其实双向绑定的代码简单实例就是如此,如果不能好好理解那就运行一遍吧~你会发现有些东西只能意会不能言传~

组件化应用构建

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

<script>
//注册一个组建实例
Vue.component('todo-item',{
    // "prop"，类似于一个自定义特性。
    props:['todo'],
    template:'<li></li>'
});
</script>

解析下吧: Vue.component,这个函数其实就是对应的注册组件,props:可以定义自定义不同组件的特性. template,其实就是对应的html组件模板.

接下来我们看一个完整的组件例子吧!

<!--组件化的构建-->
<!--组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：-->
<div id="app7">
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <ol>
        <!-- 创建一个 todo-item标签组建-->
    <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id">
    </todo-item>
    </ol>
</div>
    <script>
    //注册一个组建实例
    Vue.component('todo-item',{
        // "prop"，类似于一个自定义特性。
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    });
    
    var app7=new Vue({
        el:"#app7",
        data:{
            list:[
                {id:1,text:'苹果'},
                {id:2,text:'雪梨'},
                {id:3,text:'西瓜'}
            ]
        },
    })
    </script>

上面就是一个简单的组件模块.可能现在你会有一个疑问,vue的组件模块有什么用处呢?我们且看下官方的回复:

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理.其实简单来说,就像我们在模块化开发的时候,对于一些公共的模块,如果要复用我们就会封装,在其他需要用的地方再引入调用.也使得不同模组之间的逻辑修改互不影响.

总结

其实vue的基础认识,我们刚刚已经大致了解.大概下一篇文章我们会简单讲解下vue的安装教程和试用,毕竟如果在开发一些特别的组件和应用这部份的知识还是需要拥有的.

1.嘿，我们来认识一下vue吧!