初识VUE

(vue.js开发版本-会多一些可读性错误提示，vue.min.js生产版本)

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2. app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3. app容器里的代码被称为【Vue模板】；

<!-- 准备好一个容器 -->
<div id="app">
    <h1>Hello,{{name}},{{address}},{{Date.now()}}</h1>
</div>

4. Vue实例和容器是一一对应的（一个实例对应多个容器，则除了第一个容器其他容器的Vue语法都不能正常解析；多个实例对应一个容器，被第一个Vue实例接管后面的实例也运行但不会在容器中体现，会报错）；

5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6. {{XXX}}中XXX要写js表达式，且XXX可以自动读取到data中的所有属性；

7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

PS: js表达式和 js代码（语句）

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

（1）.a

（2）.a+b

（3）.demo(1)

（4）.x === y ? 'a' : 'b'

2. js代码（语句）

（1）.if(){}

（2）.for(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue入门</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
		<div id="app">
			<h1>Hello,{{name}},{{address}},{{Date.now()}}</h1>
		</div>

		<script type = "text/javascript">
            Vue.config.productionTip = false //阻止vue在启动时生成生产提示。

            // 创建Vue实例
		    new Vue({
		    	el: '#app', // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
		    	data: { // data中用于存储数据，数据供el所指定的容器去使用，值这里暂时先写成一个对象
				    name:'武林外传',
                    address:'七侠镇'
			    }
		    })
	    </script>
	</body>
</html>

模板语法

1. 插值语法：

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2. 指令语法：

功能：用于解析标签（包括：标签属性、标签内容、绑定事件...）

举例：【v-bind:href="xxx"】或简写成【:href="xxx"】，xxx同样要写js表达式，且可以直接读取到data中所有属性。

备注：Vue中有很多指令，且形式都是：【v-????】，此处只拿v-bind举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模板语法</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
		<div id="app">
			<h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            </hr>
            <h1>指令语法</h1>
            <!-- 页面标签显示【<a v-bind:href = "HTTP://WWW.BAIDU.COM">点我去百度一下</a>】 -->
            <a v-bind:href = "link.url.toUpperCase()">点我去{{link.name}}一下</a>
            <a :href = "link.url">点我去{{link.name}}两下</a>
		</div>
	</body>
	<script type = "text/javascript">
        Vue.config.productionTip = false

        // 创建Vue实例
	    new Vue({
		    el: '#app',
		    data: { 
			    name:'武林外传',
                link:{
                    name:'百度',
                    url:'http://www.baidu.com'
                }
			}
		})
    </script>
</html>

Vue的两种数据绑定方式

1. 单向绑定（v-bind）：数据只能从data流向页面。

2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

备注：

(1). 双向绑定一般都应用在表单类元素上（如: input、select等）

(2). 【v-model:value】可以简写成【v-model】，因为v-model默认收集的是value值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
		<div id="app">
            单向数据绑定：<input type="text" v-bind:value="name"/>
            <br/>
            双向数据绑定：<input type="text" v-model:value="name"/>
            <!-- 简写：
                    单向数据绑定：<input type="text" :value="name"/>
                    双向数据绑定：<input type="text" v-model="name"/>
            -->
            <!-- 下行代码是错误的，因为v-module只能应用在表单类（输入类）元素（有value值）上 -->
            <h2 v-model:x="name">你好</h2>
		</div>
	</body>
	<script type = "text/javascript">
        Vue.config.productionTip = false

        // 创建Vue实例
	    new Vue({
		    el: '#app',
		    data: { 
			    name:'尚硅谷',
			}
		})
    </script>
</html>

el与data的两种写法

1. el的两种写法

(1). new Vue 时配置el属性

(2). 先创建Vue实例，随后再通过vm.$mount('#app')指定el的值

2. data的两种写法

(1). 对象式

(2). 函数式

如何选择：使用组件时，data必须使用函数式，否则会报错。

3. 一个重要原则

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>el与data的两种写法</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
		<div id="app">
            <h1>你好，{{name}}</h1>
		</div>
	</body>
	<script type = "text/javascript">
        Vue.config.productionTip = false
        // el的两种写法
        /*
	    const v = new Vue({
		    //el: '#app', //第一种写法
		    data: { 
			    name:'尚硅谷'
			}
		})
        console.log(v)//输出vue实例
        // 挂载-根据需求再将容器模板与vue实例匹配
        v.$mount('#app') //第二种写法
        */
        
        //data的两种写法
	    new Vue({
		    el: '#app',
            //data的第一种写法：对象式
            /*
		    data: { 
			    name:'尚硅谷'
			}
            */
            
            //data的第二种写法：函数式
            data:function(){ //简写 data(){
                console.log('@@@',this)//此处的this是Vue实例对象
                return{
			        name:'尚硅谷'
                }
			}
		})
    </script>
</html>

data:function(){console.log('@@@',this) return{ }} //普通函数

data:()=>{console.log('@@@',this) return{ }} //箭头函数没有自己的this

MVVM模型

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染
- M（model）：普通的javascript数据对象，对应data中的数据
- V（view）：->DOM 前端展示页面，模板容器
- VM（ViewModel）：用于双向绑定数据与页面，对于我们来说，就是vue的实例
data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用

数据代理

1. Object.definedProperty方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Object.definedProperty方法</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	    <script type = "text/javascript">
            let person = {
                name:'张三',
                sex:'男',
                //age:18 //此处定义的age可以被遍历
            }
            // 对追加的属性进行高级的限制
            Object.definedProperty(person,'age',{
                value:18,
                // 此时age属性不可以被遍历
                enumerable:false,//控制属性是否可以枚举（遍历），默认值是false
                writable:true,//控制属性是否可以被修改，默认值是false
                configurable:true //控制属性是否可以被删除，默认值是false
            })
            //Object.keys(对象) 可以把传入对象所有属性的属性名提取出来变成数组
            console.log(Object.keys(person))//["name","sex"]
            //遍历对象属性值
            for (let key in person){
                console.log(person[key])
                // 张三
                // 男
            }
            console.log(person)//{name:"张三", sex:"男"[, age:18不被遍历]}
        </script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Object.definedProperty方法</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	    <script type = "text/javascript">
            let number = 18
            let person = {
                name:'张三',
                sex:'男',
            }
            Object.definedProperty(person,'age',{
                //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
                get:function(){ //简写成get(){
                    return number
                },
                //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
                set(value){
                    number = value;
                }
            })
        </script>
	</body>
</html>