# 02guide

* **安装**

  在html文件使用script引用Vue库文件

  ```markup
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  压缩版
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  ```
* **声明式渲染**

  * 首先声明DOM对象和对应的HTML字符串
  * 使用el获取对应的DOM对象，data中存储了关于DOM对象的数据，修改DOM对象的message就能动态的修改DOM中的值

  ```javascript
  <div id="app">{{message}}</div>

  var app=new Vue({
      el:"app",
      data:{
          message:"hello Vue!"
      }
  })
  ```
* **动态的修改属性**

  * 使用v-bind指令绑定值到title属性中
  * 在Vue对象中修改message属性则对应DOM中的title属性发生改变

  ```javascript
  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })
  ```
* **条件与循环**
  * v-if=true|false 指令能够动态的移除或者更新DOM结构
  * v-for="value in todos" ,获取单条数据然后，使用类似模板语法将对应的数据取出

    ```javascript
     <li v-for="todo in todos">
          {{ todo.text }}
     </li>
    ```
* **处理用户输入**
  * v-on:click="函数" ,绑定点击事件,对应的时间函数在methods属性中声明

    \`\`\`javascript

    反转消息 var app=new Vue( { methods:{ reverseMesage:function(){ this.message=this.message.split('').reverse().join('')

````
            }
        }
    })
```
````

* **组件化**

  * 使用component函数注册组件
  * props属性声明组件中属性

  ```javascript
      Vue.component("todo-item",{
          props:["todo"],
          template:"<li>{{todo.text}}</li>"
      })
      Vue.component("to-item2",{
          props:["todos"],
          template:"<input>"
      })
  //在组件上将DOM组件化
  <div>
  <todo-item v-for="item in somethings" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  <to-item2></to-item2>
  </div>
  ```

  > 通过组件化，能够将DOM进行组件化，将组件写入文件之间使用有利于代码维护

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/vue/02guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.