vue-mvvm 模式, vue 是一种轻量级的前端框架, 主要为模板渲染, 数据同步, 组件化, 模块化, 路由等.
https://cn.vuejs.org/ 源码: https://github.com/vuejs/vue
mvvm: m 为 model 数据模型, 负责数据存储, v 为 view 视图, 负责页面显示, vm 为 view model 负责业务处理.
数据双向绑定:
view <-> viewmodel <-> model
vue1 下载:
http://v1-cn.vuejs.org/js/vue.js
vue2 下载:
https://unpkg.com/vue@2.2.1/dist/vue.js
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <input type="text" v-model="name" />
- {{name}}
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- // 设置数据
- data: {
- name: '小达'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <!-- 绑定元素中的属性 -->
- <a v-bind:href="name">
- 百度一下
- </a>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- // 设置数据
- data: {
- name: 'http://baidu.com'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <div v-HTML="name">
- </div>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- name: '<h1 > 小达 </h1>'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <h1 v-text="name">
- </h1>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- name: '小达'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- {{name}}
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- name: '小达'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <ul>
- <li v-on:click="myclick">
- a
- </li>
- <li @click="myclick">
- </li>
- </ul>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {},
- methods: {
- myclick: function() {
- console.log("我被点击了")
- }
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <ul>
- <li v-for="list in lists">
- {{list.id}}{{list.name}}
- </li>
- </ul>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- lists: [{
- id: 1,
- name: 'a'
- },
- {
- id: 2,
- name: 'b'
- },
- {
- id: 3,
- name: 'c'
- },
- {
- id: 4,
- name: 'd'
- }]
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <div id="app">
- <h1 v-if="isShow">
- 小达
- </h1>
- <h1 v-Show="isShow">
- 小达
- </h1>
- </div>
- </body>
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- isShow: true
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <template id="account">
- <div>
- <h1>
- 内容
- </h1>
- <a href="">
- 账号
- </a>
- <a href="">
- 密码
- </a>
- </div>
- </template>
- <div id="app">
- <!-- 组件的使用 -->
- <account1>
- </account1>
- </div>
- </body>
- <script type="text/javascript">
- Vue.component('account1', {
- template: '#account'
- }) new Vue({
- el: '#app',
- data: {}
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <template id="account">
- <div>
- <h1>
- 内容 {{msg}}
- </h1>
- <a href="#" @click="log">
- 账号
- </a>
- <a href="#">
- 密码
- </a>
- </div>
- </template>
- <div id="app">
- <!-- 组件的使用 -->
- <account1>
- </account1>
- </div>
- </body>
- <script type="text/javascript">
- Vue.component('account1', {
- template: '#account',
- data: function() {
- return {
- msg: 'dashucoding'
- }
- },
- methods: {
- log: function() {
- console.log('dashucoding')
- }
- }
- }) new Vue({
- el: '#app',
- data: {}
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <template id="account">
- <div>
- <h1>
- 达叔: {{name1}}
- </h1>
- </div>
- </template>
- <div id="app">
- <account1 :name1='name'>
- </account1>
- </div>
- </body>
- <script type="text/javascript">
- Vue.component('account1', {
- template: '#account',
- // 接收数据
- props: {
- name1: String
- }
- }) new Vue({
- el: '#app',
- data: {
- name: '小达'
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue1.js">
- </script>
- </head>
- <body>
- <template id="account">
- <div>
- <h1 @click="sendData">
- 子组件
- </h1>
- </div>
- </template>
- <div id="app">
- <account1 v-on:send="getData">
- </account1>
- </div>
- </body>
- <script type="text/javascript">
- Vue.component('account1', {
- template: '#account',
- methods: {
- sendData() {
- this.$emit('send', 123)
- }
- }
- }) new Vue({
- el: '#app',
- data: {
- name: '小达'
- },
- methods: {
- getData(input) {
- console.log(input)
- }
- }
- })
- </script>
- </HTML>
vue-router 路由:
vue2.0 下载地址:
- https://unpkg.com/vue@2.2.1/dist/vue.js
- https://unpkg.com/vue-router@3.0.2/dist/vue-router.js
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue2.js">
- </script>
- <script type="text/javascript" src="js/vue-router2.js">
- </script>
- </head>
- <body>
- <div id="app">
- <router-link to='/login'>
- 登录
- </router-link>
- <router-link to='/register'>
- 注册
- </router-link>
- <router-view>
- </router-view>
- </div>
- </body>
- <script type="text/javascript">
- // 定义根组件
- var App = Vue.extend()
- // 注册
- var register = Vue.extend({
- template: '<h2 > 注册!</h2>'
- }) var login = Vue.extend({
- template: '<h2 > 登录!</h2>'
- })
- // 定义路由
- var vueRputer = new VueRouter({
- routes: [{
- path: '/',
- redirect: '/login'
- },
- {
- path: '/login',
- component: login
- },
- {
- path: '/register',
- component: register
- }]
- })
- // 使用路由
- new Vue({
- el: '#app',
- router: vueRputer
- })
- </script>
- </HTML>
路由传值
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script type="text/javascript" src="js/vue2.js">
- </script>
- <script type="text/javascript" src="js/vue-router2.js">
- </script>
- </head>
- <body>
- <div id="app">
- <router-link to='/login'>
- 登录
- </router-link>
- <router-link to='/register/xiaoda'>
- 注册
- </router-link>
- <router-view>
- </router-view>
- </div>
- </body>
- <script type="text/javascript">
- // 定义根组件
- var App = Vue.extend()
- // 注册
- var register = Vue.extend({
- template: '<h2 > 注册!{{oname}}</h2>',
- data: function() {
- return {
- oname: ''
- }
- },
- created: function() {
- this.oname = this.$route.params.uname
- }
- }) var login = Vue.extend({
- template: '<h2 > 登录!</h2>'
- })
- // 定义路由
- var vueRputer = new VueRouter({
- routes: [{
- path: '/',
- redirect: '/login'
- },
- {
- path: '/login',
- component: login
- },
- {
- path: '/register/:uname',
- component: register
- }]
- })
- // 使用路由
- new Vue({
- el: '#app',
- router: vueRputer
- })
- </script>
- </HTML>
ECMAScript6 简介
模块化, 块级作用域, 箭头函数等.
什么是 JavaScript, 它是一种动态类型, 弱类型的脚本语言, 用来给 HTML 网页增加的动态功能.
JavaScript 由三部分组成:
- ECMAScript(核心)
- DOM(文档对象模型)
- BOM (浏览器对象模型)
let 是声明变量的关键字
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- /*var a=5;
- console.log(a);
- var a=6;
- console.log(a);*/
- let a = 5 console.log(a)
- // let a = 6
- // console.log(a)
- </script>
- </body>
- </HTML>
let 与 for
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- li{ background: red; color: white; fonmt-size: 20px; margin: 10px; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- red
- </li>
- <li>
- green
- </li>
- <li>
- blue
- </li>
- <li>
- yellow
- </li>
- </ul>
- <script>
- // 块级作用域
- /*function da(){
- let a=2;
- console.log(a)
- }
- da()*/
- // console.log(a) 作用域在括号内
- // var for
- /*var lis = document.querySelectorAll('li');
- for(var i=0; i<lis.length; i++){
- lis[i].onclick = function(){
- alert(i)
- }
- }*/
- var lis = document.querySelectorAll('li');
- for (let i = 0; i < lis.length; i++) {
- lis[i].onclick = function() {
- alert(i)
- }
- }
- </script>
- </body>
- </HTML>
const: 声明一个常量, 一旦声明后就不能修改.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- const PI = 3.14;
- //PI = 123; Assignment to constant variable.
- const Person = {
- name: '小达',
- age: 12
- }
- console.log(Person.name, Person.age) Person.name = "达";
- Person.age = 123;
- console.log(Person.name, Person.age)
- </script>
- </body>
- </HTML>
数组解构赋值:
数组的结构赋值:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script>
- /*let [ a,b,c ] = [1,2,3]
- console.log(a,b,c);*/
- //let [h,,i,j] = [1,2,3]
- //console.log(h,i,j)
- // 数组的解构赋值要对应, 不对应就显示 undefined
- function da() {
- return ['red', 'green', 'blue']
- }
- let[r, g, b] = da() console.log(r, g, b)
- </script>
- </body>
- </HTML>
对象赋值:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script>
- var obj = {
- id: '1',
- name: '小达',
- age: '12',
- study: function() {
- console.log('学习')
- }
- }
- let {
- id,
- name,
- age,
- study
- } = obj console.log(id, name, age, language, study)
- </script>
- </body>
- </HTML>
字符串:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <article id="article">
- <h1>
- </h1>
- <p>
- </p>
- </article>
- <script type="text/javascript">
- // 严格模式
- 'use strice'let obj = {
- title: '哈哈',
- content: 'dashucoding'
- }
- let articleElement = document.getElementById('article')
- // innerHTML
- articleElement.innerHTML = '<h1>' + obj.title + '</h1><p></p>'
- </script>
- </body>
- </HTML>
function 用 var, let, const 表示
箭头函数
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var da = function() {
- console.log('da')
- }
- // 箭头函数
- var dashu = () = >console.log('da') var da2 = a = >console.log(a) da2('一个参数') var da3 = (a, b) = >console.log(a, b) da3(1, 2)
- </script>
- </body>
- </HTML>
REST:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- function sum() {
- var sum = 0;
- for (var i = 0; i < arguments.length; i++) {
- sum += arguments[i]
- }
- return sum
- }
- console.log(sum(1, 2, 3, )) var str = 'abcd';
- console.log(str); [...str] console.log([...str]);
- </script>
- </body>
- </HTML>
symbol:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var s = Symbol();
- console.log(typeof s) var s2 = '123'console.log(typeof s2)
- </script>
- </body>
- </HTML>
set:
size 数据的长度
add() 添加数据
delete() 删除数据
has() 查找某条数据
clear() 删除所有数据
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/jscript">
- < !--对象keyName: keyValue--><!--重复的数据会踢掉-->let set = new Set([1, 2, 3]) console.log(set); < !--set.size,
- set.add('a'),
- set.delete(1),
- set.has('a'),
- set.clear()-->
- </script>
- </body>
- </HTML>
map 数据结构:
size 数据的长度
set() 添加一条数据
delete() 删除数据
get() 获取数据
has() 查找某条数据
clear() 删除所有数据
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var map = new Map(['name', 'dashu'], ['age', 12]);
- console.log(map) console.log(map.size) console.log(map.set(['sex', 'n'])) console.log(map.delete('name')) console.log(map) console.log(map.get('age')) console.log(map.has('age')) console.log(map.clear()) console.log(map)
- </script>
- </body>
- </HTML>
结言
好了, 欢迎在留言区留言, 与大家分享你的经验和心得.
感谢你学习今天的内容, 如果你觉得这篇文章对你有帮助的话, 也欢迎把它分享给更多的朋友, 感谢.
来源: http://www.bubuko.com/infodetail-2977604.html