VUE入门

Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。

这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性。在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目。

内容转载自:https://segmentfault.com/a/1190000005041030

官方教程:https://cn.vuejs.org/v2/guide/

官方API:https://cn.vuejs.org/v2/api/

文章中的示例代码:https://github.com/AppianZ/Close2Vue/tree/master/simpleVue

 第一章 从零开始学Vue

利用new Vue()创建一个Vue实例

我们可以先初始化一个html页面,然后我们需要引入Vue 的 js 文件。引入的方式有很多,我们可以在script中引入Vue的cdn,或者去官网上下载Vue的min.js,或者用 npm 安装一个Vue的依赖。方便起见,本文中就用cdn引入。


      <html>
            <head>
                  <title>从零开始学Vuetitle>
            head>
      <body>
            <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js">script>
      body>
html>

当你在开发过程中,确保你使用的是没有压缩过的版本,因为没有压缩的版本会提供有用的详细的警告,将会给你的代码书写节省很多时间。

我们先在body里面写入一个div,并且创建一个Vue实例,然后将实例和div绑定起来。
当你创建一个新的Vue实例的时候要使用Vue()构造器,然后在你的实例中指出你的挂载点。这个挂载点就是你想要划分出来的Vue实例的边界。挂载点和实例边界是一一对应的,你只能在挂载点上处理你实例边界内的事务,而不能在你的挂载点上处理实例边界外的事务。
在Vue实例中设置挂载点的参数是 “ el ”,el 的值可以用dom元素定义。


      <html>
            <head>
                  <title>从零开始学Vuetitle>
            head>
      <body>
            <div id="vueInstance">这中间就是实例挂载点的实例边界div>

            <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js">script>

            <script>
                  // 创建一个新的Vue实例,并设置挂载点
                  var V = new Vue({
                        el : '#vueInstance'
                  });
            script>
      body>
html>

就像你在上面看到的那样,new一个Vue()就能创建一个新的实例,然后指定一个DOM元素作为实例的挂载点。定义挂载点的时候,我们用到了css选择器的id来定义。实例化的名字也可以自己来定义,以便之后调用。

利用v-model进行双向数据绑定

我们可以用v-model对input输入框进行绑定,从而我们可以使用动态的获取数据对象的值。你可以认为v-model是一个指定的属性,就像html元素的属性。这里的双向数据绑定可以用在很多表单元素上,比如input、textarea、select。
Vue利用v-model这个指令绑定了一个数据,而这个数据是我们希望能够通过用户输入操作而更新的数据。
比如我们下面这个例子,我们要在input标签上绑定数据name,我们需要在Vue实例中的data对象中实现声明。

"vueInstance"> 输入您的姓名: <input type="text" v-model="name"> div>

你可能感兴趣的:(VUE)