Vue.js 基础学习

Vue.js官网： https://cn.vuejs.org/v2/guide/index.html

一、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue.js 目的：

解决数据绑定的问题
vue框架产生的主要目的是为了开发大型单页面应用，
它还支持组件化，也就是可以将页面封装成若干个组件，这样使页面复用性达到最高（支持组件化）。

三、Vue.js 特性：

MVVM模式：（数据变量（model）发生改变视图（view）也改变，视图（view）改变，数据变量（model）也发生改变）

用MVVM模式的好处：

低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
可测试性。可以针对ViewModel来对界面(View)进行测试

四、开始创建Vue 应用

1、开始创建第一个 Vue 应用

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，也就是对数据进行绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title v-bind:title="message">vue-demo</title>
		<!-- vue.js -->
		<script type="text/javascript" src="dist/vue.min.js" ></script>
	</head>
	<body>
		
		<div id="app">
			{{message}}
		</div>

		<script type="text/javascript">
			var app = new Vue({ //创建Vue对象
				el: '#app', //节点元素id
				data: { //数据
					message: 'hello Vue!'
				}
			});
		</script>
	</body>
</html>

2、Vue.js指令

（1）v-model

作用：实现表单输入和应用状态之间的双向绑定。接收用户输入的一些数据，直接就可以将这些数据挂载到data属性里面

<div id="app-2">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'Hello Vue!'
    }
});

（2）v-if

作用：通过判断加载内容，若为真加载，为假时删除元素。

<div id="app-3">
   <p v-if="seen">显示内容</p>
</div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
});

（3）v-show

作用：v-show 用法和v-if相同，安全性没有v-if高，只是v-show将元素display设置成none，并不是将元素直接移除。

（4）v-else

必须紧跟在v-if或v-show元素的后面，否则它不能被识别。

（5）v-for

作用：循环遍历元素

<div id="app-4">
    <p> {{ title }}</p>
    <p v-for="todo in todos">
        {{ todo.id +'. '+ todo.name}}
    </p>      
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
    title: '前端',
    todos: [
        { id: 1, name: 'JavaScript' },
        { id: 2, name: 'jquery' },
        { id: 3, name: 'Vue.js' }
        ]
    }
});

（6）v-bind

作用：v-bind 对页面中html属性进行绑定

<div id="app-5">
    <img v-bind:src="src" v-bind:style="style"/>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        src: 'img/1.png',
        style: 'width:100%;height:100%;'
    }
});

（7）v-on

<div id="app-6">
    <p>{{message}}</p>
    <input v-on:blur="blur()" id="name"></input>
    <button v-on:click='save(6)'>保存</button>
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue.js!'
    },
    methods:{
        save: function(id){
            var name = document.getElementById('name');	
            alert('保存 id=' + id + ' ; name=' + name.value);
        },
        blur: function(){
            alert('blur');
        }
    }
});

（8）v-bind 和 v-on 缩写

v-bind 和 v-on 缩写很常用所以Vue.js 提供缩写

v-bind 缩写为冒号（：）
v-on 缩写为艾特（@）

用法：对比上面的

<div id="app-5">
    <img :src="src" :style="style"/>
</div>

<div id="app-6">
    <p>{{message}}</p>
    <input @blur="blur()" id="name"></input>
    <button @click='save(6)'>保存</button>
</div>

猜你喜欢