vue指令详解 - 爱码网

一、vue简绍

　　1. Vue.js是什么
　　 Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e。版本分为v1.0 和 v2.0　　

　　2、Vue.js的特点

　　　　1、是一个构建用户界面的框架

　　　　2、是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定

　　　　3、数据驱动+组件化的前端开发（核心思想）

　　　　4、通过简单的API实现**响应式的数据绑定**和**组合的视图组件**

　　　　5、更容易上手、小巧

　　3、为什么要学Vue.js

　　　　1、简单、易学、更轻量

　　　　2、指令以v-xxx开头，好记

　　　　3、 + HTML代码+JSON数据，再创建一个vue实例

二、vue语法格式介绍

	js:
		new Vue({
			el:'#itany', //指定关联的选择器
			data:{ //存储数据
				msg:'Hello World',
				name:'tom'
			},
			methods:{//存储方法
				showme:function(temp){
　　　　　　　　　　　　　　　　　　　　alter(temp)
				}}
		});
	html:
		<div >
		   {{msg}}    //两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中
		</div>

三、安装vue-devtools插件，便于在chrome中调试vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false，该插件可以在google商城上安装
            Vue.config.devtools=true;  #是否在开发环境检测vue,默认为true，如果为flase那么在开发环境下不能使用vue-devtools检查代码
            Vue.config.productionTip=false; //阻止vue启动时生成生产消息

            var vm=new Vue({
                el:'#itany', //指定关联的元素
                data:{ //存储数据
                    msg:'Hello World'
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->
    </div>

    <h3>
        {{msg}}
    </h3>
</body>
</html>

View Code