本文原文链接：https://blog.csdn.net/Jack__iT/article/details/88213177
什么是MVVM框架？
View---ViewModel---Model之间的通讯
View:视图，dom
ViewModel：通讯，观察者，能监听到数据的变化
Model：数据，JavaScript对象
常用的MVVM框架有angular.js、react.js、vue.js
MVVM的应用场景：
复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化，保证前端用户体验
什么是vue.js (核心是：数据驱动+组件化的前端开发)
数据驱动：实现数据的双向绑定，数据改变驱动视图自动更新
组件化设计原则：页面上每个独立的可视/可交互区域视为一个组件，每个组件对应一个工程目录，组件所需要的各种资源在这个目录下的就进维护，页面就成了组件的容器，它由组件来组成
Vue.js 是一套构建用户界面的 渐进式框架。使用MVVM架构，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件，响应式修改dom元素。
使用Vue，您可以快速编写应用程序并直接从浏览器运行应用程序，或者如果需要，可以使用ES6，JSX，组件，路由，捆绑等构建复杂的应用程序。
它可以处理您可能想要使用它的许多不同方式。它也非常灵活，可以适应不同的编写代码的方式，例如，可以使用HTML或Javascript编写模板，也可以使用JSX。可以不触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
Vue.js、Angular.js和React.js的区别
Vue.js更小更轻量、更易上手、学习快借鉴了angular.js的指令和react的组件化，react有自己的js语法、Angular是java工程师写的，最难
安装
Vue.js在项目中的引入方式
直接引入js库（可以是CDN在线仓库中的vue.js，也可以是自行下载的vue.js库）
<script src="js/vue.js"></script>
NPM方式安装
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件
在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：输入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了 ，如果权限不够，请使用管理员运行命令提示符
调试工具：
Chrome浏览器，安装vue插件
使用
基础知识+TodoList+Vue-cli
简单直接的dom操作
<body>
<div id="root">{{msg}}</div>
<script>
new Vue(
{
el: "#root",
data:{
msg:"vue Demo"
}
}
)
</script>
</body>
挂载点、模板与实例的关系
挂载点：即Vue对象绑定的元素、需要进行操作的元素，Vue只会对挂载点下的内容进行处理。与vue对象的el属性对应
模板：挂载点内的内容，vue自动结合模板和数据生成内容，然后把内容放在挂载点中
<body>
<div id="root"></div>
<div v-text="msg"></div>
<script>
new Vue(
{
el: "#root",
template: '<h4>这也是模板内容 {{msg}}</h4>',
data:{
msg:"<h5>vue Demo text</h5>"
}
}
)
</script>
</body>
实例： 所创建的vue实例
数据、事件和方法
数值
插值表达式{{vaule_name}}
v-text和v-html:
Vue-cli：
它是vue的脚手架工具
安装：
安装node.js环境
node -v 查看node.js版本
安装vue-cli:
Windows下：npm install -g vue-cli
Mac下：sudo npm install -g vue-cli
常用的vue命令:
vue 命令：
vue list 命令：查看列出可以用哪些模板
vue -V 查看版本
C:\Users\Administrator>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
安装要使用的模板：
vue init webpack sell
项目名称，项目描述、作者、单元测试
安装完成后，Windows下dir可查看当前目录下文件
进入项目目录，
npm install
npm run dev 运行项目
vue项目的构成和原理
webpack
模板语法：
{{}}里面可以包含表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<style>
.bg{
color: red;
}
</style>
</head>
<body>
<div id="div1">
<p>username:{{username}}</p>
<!-- 变量的调用-->
<p>password:{{password}}</p>
<p>age:{{age*2+5}}</p>
<!--在{{}}中可使用js表达式语法-->
<p>age2:{{age}}</p>
<p>template{{template}}</p>
<!--调用模板显示HTML结构-->
<p v-html="template"></p>
<!--调用末班显示html内容-->
<p><a v-blind: href="url">百度的超链接</a></p>
<!--将超链接作为变量，可用：代替v-blind:-->
<p><a :href="url">百度的超链接</a></p>
<button type="button" v-on:click="submit()">年龄增长</button>
<button type="button" @click="submit()">年龄增长</button>
<!--调用函数的两种方法，可用@代替v-on:-->
</div>
<h5 class="bg">Hello World！！{{msg}}</h5>
<script>
new Vue(
{
el: '.bg',
data: {
msg: 'hello vue!!',
username: "zhang"
}
}
);
new Vue({
el: '#div1',
data: {
username: 'lisi',
password: '123',
age: 23,
template: '<div>this is a template!</div>',
url: ' http://baidu.com'
},
methods: {
submit: function () {
this.age++
}
}
})
</script>
</body>
</html>
计算属性与侦听器
计算属性computed：适合于数据联动，可监听多个变量，但是监听的变量需要在实例里面
监听器 watch：适合于异步场景，监听一个变量或常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>{{msg1}}</p>
</div>
<script>
var app=new Vue({
el: '#app',
data: {
msg: 'vue project',
another: "another msg"
},
watch:{
msg:function (newval,oldval) {
console.log('newval:'+newval);
console.log('oldval:'+oldval)
}
},
computed: {
msg1: function () {
return 'computed:'+this.msg+' , '+this.another
}
}
})
</script>
</body>
</html>
条件渲染、列表渲染、class和Style
v-if,v-else,v-else-if,和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="count<8">判断1：cout小于8,它的值是：<span>{{count}}</span></div>
<div v-else-if="count>=8&&count<10">判断2：count大于等于8且小于10啦：值为：{{count}}</div>
<div v-else>判断3：其他都不满足了，它的值是：<span>{{count}}</span></div>
<button type="button" @click="submit()">计数器</button>
</div>
<script>
var app= new Vue({
el: '#app',
data: {
msg: 'vue demo3!',
count: 5
},
methods:{
submit:function () {
this.count++;
}
}
});
</script>
</body>
</html>
v-for 列表渲染
<body>
<div id="app">
<div>{{msg}}</div>
<div v-for="item in list">
<p v-if="item.age>20">大于20，姓名：{{item.name}}，年龄：{{item.age}}</p>
<p v-if="item.age<=20">小于或等于20，姓名：{{item.name}},年龄：{{item.age}}</p>
</div>
</div>
<script>
new Vue({
el:'#app',
data: {
msg:'vue demo 4',
list: [
{name: 'zhang',age: 24},
{name:'huang',age:20},
{name:'luo',age:23},
{name:'chen',age:18}
]
}
})
</script>
</body>
style的绑定
<body>
<div id="app">
<div v-bind:style="mystyle">{{msg}}</div>
</div>
<script>
new Vue({
el: "#app",
data:{
msg: 'this is vue demo4',
mystyle:{
color: 'red',
textShadow: '0 0 5px green'
}
}
})
</script>
</body>
vue-cli
C:\Users\Administrator>f:
F:\>cd /vueFiles
F:\vueFiles>vue create vue-project-190201
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
F:\vueFiles>
vue的文件结构： template、script、style
模板语法：包含插值、指令（指令缩写 ）；
创建vue-cli工程项目的方式
进入要创建项目的目录，使用vue create 工程名 的命令创建
使用vue ui命令，然后打开浏览器UI界面创建项目
预设：包管理器 npm
功能：路由组件：Router 状态管理组件vuex 还有css的预编译组件CSS Pre-processors 使用配置文件 勾选使用
配置：预编译器：Sass/SCSS ，ESLint的配置文件为默认的标准的配置文件：ESLint+Standard config
启动项目：
npm run serve
网友评论