vue个人学习基础总结（入门）

vue基础总结

vue基本使用

安装

• 直接下载引入，作为全局变量

• <script src="./js/vue.js"></script>
  

vue是什么

• 基于ES5的用于构建用户界面的渐进式框架

vue实例

• 通过new Vue创建实例

• var vm = new Vue({
       
  	//opinons 
      data:...,
      
  
  })
  

• 当实例被创建时就已经存在于 data 中的 property 才是响应式的，晚些需要用到的数据可以设置初始值为null或false等

• 实例中提供方法和属性

  • _ 开头：组件内部私有属性和方法，一般不调用修改
  • $ 开头：组件对外提供的公有属性和方法
  • 其它：我们用户（定义组件创建组件的程序员们自定义的）

• 常用opinions API

  • el:'#app'模板渲染后的挂载点，等同于this.$mount（‘#app’），如果没有 template，但是有 el 选项，那么Vue 会把 el 元素的 outerHTML 作为 template

  • data:{...}存放绑定的数据

  • template:...模板，覆盖 #app标签，实际是使用了render函数，vue会在内部执行 html字符串模板 -> ast对象（带render（）函数） -> render（）-> 生成VNode（及虚拟节点）-> 渲染到真实Dom

  • render(createElement)函数，用于生成虚拟节点vNode，其带有一个参数createElement用于创建节点

    render(n){
           
    	let vNode = h(
        	'标签名'
            {
           
            	attrs:{
           标签属性：属性值,...}
            },
            [
                // 为该节点嵌套内容
                h('标签名'