Vue基础学习1

1、vue的介绍

• Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
• Vue 只关注视图层， 采用自底向上增量开发的设计。
• Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2、Vue的简单应用,常用语法

1、vue的引入

新手不建议直接使用webpack自动化构建vue应用，这个我们后面会讲。现讲2种简单的方式

(1)直接引用，引用地址为：

(2)直接下载，在引入下载包使用。

2、vue的简单渲染实例

• 文本赋值 {{value}}
• 表单赋值 v-model
• 属性绑定 v-bind或 ":"
• 事件绑定 v-on: 或 "@"
• 实例化vue：new Vue

html代码:

  
    
      
      
    
    
      

         
这是插入的一段文本{{msg}}
        
        点击弹出输入值
      
    
  

js代码：(本例使用的版本为v2.5)

  var vm = new Vue({
      el:"#app",      //绑定根节点
      data:{      //数据源
         msg:"",    //消息初始化为空
         colorClass:"classa"
      },
      methods:{
        prompt:function(){
            alert(this.msg);
        }
      }
  })

第一小节到此结束，附一张vue的生命周期图，后面的很多场景都需要用到

image.png