vue.js入门笔记

• vue的安装

1. 进入Vue的官方网站：http://cn.vuejs.org

   进入之后点击 →学习→教程→点击左侧安装选项→使用开发版本（直接使用<script>标签引入）点击进入复制源代码在编辑器新建vue.js文件，把代码粘贴进来保存

2. 新建一个index.html文件,把vue.js导入，在head里用<script src="/vue.js"></script>导入

3. 

4. 如果通过script标签<script src='./vue.js'></script>引入vue.js，最好要放在head标签里，避免页面抖屏的现象；

         {{}}：可以用来显示data里面的内容。

• 创建vue实例

  <div id="root">hello world<div/>
  
  <script>
      new Vue({
          el:"#root",
          data:{
  
          }
  
      })
  <script/>

   

• data：vue里面的实例数据，会放在data里面。

•  el：el=“#root”是挂载点，跟id=root的模块链接。“#”不要忘

•  

  挂载点：vue实例里面的el属性对应的id。

• 模板：挂载点内部的内容都叫模板内容。模版可以通过template写在vue中，和写在挂载点下面的作用是一样的。

 

---

• VUE实例中的数据，事件与方法 

1. v-html：v-html不会进行转义而是直接输出（不会输出html标签）

   v-text：v-text会将输出的内容进行转义然后再进行输出（会把html标签输出）

   v-on:click=" 方法名"  新的模板指令，只绑定事件；绑定的事件是click

   v-on: 可以用@代替

   当点击“content”时候，会调用handleClick方法 

   方法定义在：实例中的methods:{}中