Vue2学习笔记

一、VScode插件

1、vue编写提示插件
Vue 2 Snippets

2、加载当前目录所有资源的插件，会在5500端口工作
live server

二、浏览器调试访问Vue页面时，控制台提示：

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

1、方法一

productionTip 设置为 false 以阻止 vue 在启动时生成生产提示。

2、方法二

在vue.js中搜索（ctrl+F）找到productionTip属性，修改为false； 

再保存更改信息，进入浏览器查看控制台，生产提示的警告就没有了 。

三、Vue.js is detected on this page解决方法

 在你的入口JS文件里加上一行Vue.config.devtools = true

四、介绍vue.js的引用和基本结构

	
		
		
		
		
	
	
		

		
		

			
Hello，{{name.toUpperCase()}}，{{address}}
		

		
	

五、Vue的模版语法

 Vue模板语法有2种：插值语法和指令语法。
  1.插值语法：

功能：用于解析标签体内容。
 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
  2.指令语法：
  功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
  举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
             且可以直接读取到data中的所有属性。
  备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。         

	
		
		
		
		
	
	

		
		

			
插值语法
			
你好，{{name}}
			

			
指令语法
			点我去{{school.name}}学习1
			点我去{{school.name}}学习2
		
	

	

六、数据绑定

	
		
		
		
		
	
	
		
		
		

			
			

			
			单向数据绑定：

			双向数据绑定：


			
			
		
	

	

七、el和data的两种写法

1、el的两种写法：(1).new Vue时候配置el属性。  (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

    
    
    
    


    

        
你好，{{name}}
    

    

2、data的两种写法：(1).对象式； (2).函数式；如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

	
		
		
		
		
	
	
		
		

			
你好，{{name}}
		
	

	

 一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

八、Object.defineproperty方法