vue基础知识和基本用法
1. 基础知识
1.1 什么是vue.js
1.2 怎么使用vue.js
1）在html页面使用script引入vue.js的库即可使用。 2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。 大型应用推荐此方案。 3）Vue-CLI脚手架 使用 vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
1.3 vue.js的功能有哪些
1）声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。 2）条件与循环 dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。 3）双向数据绑定 Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑 定的数据对象，修改数据对象的值自动修改Dom元素中的值。 4）处理用户输入 为了让用户和你的应用进行交互，我们可以用 v -on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的 方法 5）组件化应用构建 vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。
2. 入门小demo
首先创建一个目录，把vue的库vue.min.js放到该目录下，然后创建一个HTML页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js测试程序</title>
<script src="vue.min.js"></script><!--导入vue.js类库-->
</head>
<body>
<!--body体里面的内容是MVVM中view视图部分的内容-->
<div id="app">
{
{name}}
</div>
</body>
<script>
//script里面编写MVVM中model和viewmodel中的内容
var VM = new Vue({
el:#app,//vm接管了app区域的管理
data:{
//model数据
name:好好学习,天天向上!
}
})
</script>
</html>
上一篇：
IDEA上Java项目控制台中文乱码