VUE
vue-cli脚手架,vue-router路由 vuex做状态管理 vue ui 界面
1.下载node.js
2.下载vue-cli
cnpm install vue-cli -g
查看模版
vue-list
1.创建第一个vue的项目
vue init webpack myvue
一路no
2.初始化运行
cd myvue
npm install
npm run dev
构建用户界面的前段框架
一:传统的
1.传统的:jQuery+模版引擎
- 大量的时间在处理都dom的操作上,而不是业务
vue
1.基于使用vue中提供的指令,可以方便的渲染页面结构。
- 数据驱动视图
- PS指令是vue为开发者提供的模版语法,用来辅助开发者渲染页面的结构
3.基于vue提供的时间绑定,可以轻松的处理用户和页面之间的交互行为
框架
辅助配置工具
- vue-cli
- vue-devtools
vue的特性
- 数据驱动视图
vue会监听数据的变化,从而自动从星的渲染页面的结构自动渲染页面-------单向数据绑定
双向数据绑定:
MVVM:实现数据驱动和双向绑定的核心---是vue的实例
View----viewmodel----Model
(自动更新/监听DOM的变化)(监听数据的变化/自动同步)
vue的版本
vue的基本使用
1.导入vue.js的script脚本文件
3.创建vm实例对象(vue的实例对象)
MVVM
软件架构模式,微软--
data:Model的数据源
el:指向的选择器,是View的视图区域
vm:实例是viewmodel
{{username}} :是View的视图区域<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 声明vue的工作区域 -->
<div id="app">{{username}}</div>
<!-- 导入vue的脚本 -->
<script src="./lib/vue.js"></script>
<!-- 创建vue的实例对象 -->
<script>
const vm = new Vue({
//使用EL属性,指向vue要控制的区域
el:'#app',
//数据源
data:{
username:'20'
}
})
</script>
</body>
</html>
vue-devtools
在谷歌浏览器里面,极简插件
el挂载点
- 用来设置Vue的挂载(管理)的元素
- vue会管理命中的元素和内部的后代元素
- 可以使用不同的选择器,建议id
- 可以使用其他的双标签,但是不能使用HTML和body
date
基本渲染:
{{message}}
{{student.name}}
{{list[0]}}
基本属性
1.el属性
用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
2.data属性
用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
3.template属性
4.methods属性
5.render属性
创建真正的Virtual Dom
用来计算 Vue.js 计算属性,计算属性在处理一些复杂逻辑时是很有用的
7.watch属性
Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化 watch:function(new,old){}
监听data中数据的变化 两个参数,一个返回新值,一个返回旧值。
以上就是vue常用的7个属性,当然vue的属性可不知这些,开发需要的话可以在官网查阅剩余属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。