vue基础---介绍

（1）声明式渲染

     Vue.js 的核心是采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

    ①文本

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

    如今已经成功建立了第一个 Vue 应用！看起来这跟渲染一个字符串模板很是相似，可是 Vue 在背后作了大量工做。如今数据和 DOM 已经被创建了关联，全部东西都是响应式的。咱们要怎么确认呢？打开浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

    

    ②属性

    除了文本插值，还能够像这样来绑定元素特性：

    <div id="app" v-bind:title="message">
          {{info}}
    </div>
    <script type="text/javascript">
        var app = new Vue({ el: '#app', data: { info:"将鼠标悬停上来查看效果", message: '如今时间是'+new Date().toLocaleString() } }) </script>

    这里的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

    它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

    若是再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

.

（2）条件与循环

    ①条件指令：控制切换元素是否插入/显隐

    <div id="app" v-bind:title="message" v-if="seen">
          {{info}}
    </div>
    <script type="text/javascript">
        var app = new Vue({ el: '#app', data: { info:"将鼠标悬停上来查看效果", message: '如今时间是'+new Date().toLocaleString(), seen:true } }) </script>

    继续在控制台输入 app3.seen = false，会发现以前显示的消息消失了。

    这个例子演示了不只能够把数据绑定到 DOM 文本或属性，还能够绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，能够在 Vue 插入/更新/移除元素时自动应用过渡效果。

    ②循环指令：v-for 指令能够绑定数组的数据来渲染一个项目列表

<ul id="list">
    <li v-for="book in books">
        {{book.name}}
    </li>
</ul>

var list = new Vue({
        el:"#list",
        data:{
            books:[
                  {name:"一年级语文"},
                  {name:"二年级语文"},
                  {name:"三年级语文"},
                  {name:"四年级语文"},
                  {name:"五年级语文"},
                  {name:"六年级语文"}
             ]
        }    
})

   

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

   

 

（3）处理用户输入

    ①事件监听器：v-on 指令添加一个事件监听器，经过它调用在 Vue 实例中定义的方法

<div id="app" v-bind:title="message" v-if="seen">
      {{info}}
     <button v-on:click="changeInfo">按钮</button>
</div> var app = new Vue({ el: '#app', data: { info:"将鼠标悬停上来查看效果", message: '如今时间是'+new Date().toLocaleString(), seen:true 
 }, methods:{ changeInfo:function(){ this.info = "我是修改后的显示信息info", this.message = "我是修改后的鼠标悬停提示信息" } } })

    注意在 changeInfo方法中，咱们更新了应用的状态，但没有触碰 DOM——全部的 DOM 操做都由 Vue 来处理，编写的代码只须要关注逻辑层面便可。

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

<div id="app" v-bind:title="message" v-if="seen">
      <input type="text" name="user_name" v-model:value="user_name">
      <p style="color: red;">
          {{user_name}}
      </p>
</div>

        var app = new Vue({
            el: '#app',
            data: {
                info:"将鼠标悬停上来查看效果",
                message: '如今时间是'+new Date().toLocaleString(),
                seen:true,
                user_name:""
              },
              methods:{
                  promptInfo:function(){
                      this.info = "我是修改后的显示信息info",
                      this.message = "我是修改后的鼠标悬停提示信息"
                  }
              }
        })

 

 

（4）组件化应用构建

    在Vue中，一个组件就是拥有预约义选项的vue实例。注册组件

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

    构建组件模板

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

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

Vue.component('todo-item', {
  // todo-item 组件如今接受一个"prop"，相似于一个自定义特性。 这个 prop 名为 todo。
  props: ['todo'], template: '<li>{{ todo.text }}</li>' })

    接下来可使用 v-bind 指令将待办项传到循环输出的每一个组件中：

<div id="app-7">
  <ol>
    <!--
      如今咱们为每一个 todo-item 提供 todo 对象 todo 对象是变量，即其内容能够是动态的。 咱们也须要为每一个组件提供一个“key”，以后再 做详细解释。 --> <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: '随便其它什么人吃的东西' } ] } })

 

 

.