Web前端-Vue.js必备框架（一）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue js</title>
</head>
<body>

<div id="app">
 <h1>{{ message }}</h1>
 <input type="text" v-model="message">
 <pre>
  {{ $data | json }}
 </pre>
</div>

<script src="vue.min.js"></script>

<script>
new Vue({
 el: "#app",
 data: {
  message: "Hello World!"
 }
});

</script>
</body>
</html>
<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Vue js</title>
 </head>
<body>

<div id="app">
 <form>
  <div class="error" v-show="!message">dashucoding</div>
  <textarea v-model="message"></textarea>
  <button v-show="message">Send</button>
 </form>

 <pre>{{ $data | json }}</pre>
</div>

<script src="vue.min.js"></script>
<script>
 new Vue({
  el: '#app',
  data:{
   message: ''
  }
 });
</script>

</body>
</html>

v-show和v-if使用第一个整体元素还存在，使用第二个整体都不存在了。

<head>
 <meta charset="UTF-8">
 <title>Vue.js</title>
 <link rel = "stylesheet" href="main.css">
</head>

<body>
<div id = "app">
 <form action="demo.html" v-on:submit="submitForm">
  <button type="submit">Submit</button>
 </form>
</div>

<script src="vue.min.js"></script>
<script>
new Vue({
 el: '#app',
 methods: {
  submitForm: function(e){
   alert("dashucoding");
   //e.preventDefault();
  }
 }

})
</script>
</body>
</html>

组件化

<body>

<div id="app">
 <count></count>
</div>

<template id="da">
</template>

<script src="vue.min.js"></script>
<script>
 Vue.component("counter", {
   template: '<h1>dashu</h1>'
 });

new Vue({
 el: '#app',
 data: {
  count: 0
 },

})
</script>

</body>

什么是Vue.js？是目前最火的框架，React是最流行的框架，打包工具Webpack，目前三大主流Vue.js，Angular.js，React.js框架。

Vue.js构建用户界面框架，注重视图层。

React开发网站，开发手机APP

Vue可以用于开发APP，需要Weex

MVC 是 后端开发的概念
MVVM，视图层分离
Model, View, VM ViewModel

MVVM的案例：

v-cloak

[v-clock]{
 display: none;
}
<p v-cloak></p>

v-text v-html v-bind: v-on

事件修饰符

v-on
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 使用事件捕获模式
.self 只当事件在该元素本身触发时回调
.once 事件只触发一次
<body>
 <div id = "app">
  <div>
   <input type="button" value="戳他">
  <div>
 </div>
 <script>
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
   });
 </script>
</body>

实例：Vue.js只关注视图层

<div id = "app">
 <p> {{ message }} </p>
</div>

下载地址：
https://vuejs.org/js/vue.min.js

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
<div id="app">
  <span v-bind:title="message">
    鼠标悬停
  </span
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
<div id="app">
  <p v-if="seen">看到我了</p>
</div>

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

条件循环

<div id="app">
  <ol>
    <li v-for="do in dos">
      {{ do.text }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    dos: [
      { text: 'JavaScript' },
      { text: 'Vue' },
      { text: '项目' }
    ]
  }
})
// v-on 添加一个事件监听器
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="Message">消息</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  methods: {
    Message: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

组件

Vue.component('do-item', {
  template: '<li>dashucoding</li>'
})
<do-item></do-item>
<div id="app">
 <ol>
 <do-item
      v-for="item in List"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></do-item>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    List: [
      { id: 0, text: '1' },
      { id: 1, text: '2' },
      { id: 2, text: '吃的东西' }
    ]
  }
})

计算器：

<div id="app">
 <input type = "text" v-model = "n1">
 <select v-model="opt">
   <option value="0"> + </option>
   <option value="1"> - </option>
   <option value="2"> × </option>
   <option value="3"> ÷ </option>
 </select>

  <input type="text" v-model="n2">
  <input type="button" value="=" v-on:click="getResult">
  <input type="text" v-model="result">
</div>

添加class类样式

<h1 :class="[ 'red', 'yellow' ]" > </h1>
<h1 :class=" [ 'red', 'than', isactive? 'active' : '' ]">

<h1 :class="[ 'red', 'than', {'active' : isactive}]"></h1>

style

<h1 :style="{color: 'red', 'font-size' : '20px'}"></h1>

v-for

<div id ="app">
 //<p>{{list[0]}}</p>
 <p v-for="item in list"> {{item}} </p>
 <p v-for="(item,i) in list"> {{item}} </p>
</div>

<p v-for="count in 10">{{count}}</p>
v-if 不断创建和删除，不利于重复使用渲染
v-show 不会删除DOM
v-cloak v-text v-bind v-on
v-bind :
v-on @
v-model : 表单元素
v-for
v-if
v-show
// 事件修饰符
.stop .prevent
.capture
.self
.once

v-for 使用key属性 string/number

创建一个Vue

var vm = new Vue({

})
var data={a:1};
var vm = new Vue({
 data: data
})
vm.a == data.a // true

生命周期图示

数据绑定

<span> {{msg}} </span>

v-once执行一次
<span v-once> {{msg}} </span>

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="1">...</a>

<!-- 缩写 -->
<a @click="1">...</a>
目录 说明
build 项目构建
config 配置目录
mode_modules npm加载的项目依赖模块
src 开发的目录
static 静态资源目录
test 初始测试目录
index.html 入口文件
package.json 项目配置文件

实例：

<div id="vue_">
    <h1>{{site}}</h1>
    <h1>{{url}}</h1>
    <h1>{{det()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_',
        data: {
            site: "123",
            url: ".com"
        },
        methods: {
            det: function() {
                return  this.site;
            }
        }
    })
</script>
v-html="message"

v-bind:class="{'class1': use}"

v-bind:id="id"

<script>
new Vue({
  el: '#app',
  data: {
    id : 1
  }
})
</script>

v-if="seen"

<pre><a v-bind:href="url">123</a></pre>

<script>
new Vue({
  el: '#app',
  data: {
    url: '123456'
  }
})
</script>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '123456!'
  }
})
</script>
v-if v-else v-else-if

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

 <div id="app">
  {{ message.split('').reverse().join('') }}
</div>

Vue代码

<body>
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    //  vm 对象就是 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示当前要控制页面上的哪个区域
      //  data 就是 MVVM中的 M
      data: {
        msg: '欢迎'
      }
    })
  </script>
</body>

v-cloak, v-bind:, v-on: 学习

<body>
  <div id="app">
    <!--  v-cloak 解决 插值表达式闪烁的问题 -->
    <p v-cloak> {{ msg }} </p>
    <h4 v-text="msg">1</h4>
    <!--  v-text 没有闪烁问题 -->
    <!-- v-text会覆盖元素中原本的内容，插值表达式不会把整个元素的内容清空 -->

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">111</div>
    <!-- v-bind: 提供绑定属性的指令 -->
    <!-- <input type="button" value="按钮" v-bind:title="my"> -->
    <!-- v-on: 事件绑定机制 -->
    <!-- <input type="button" value="按钮" :title="my" v-on:click="alert('hello')"> -->

    <input type="button" value="按钮" @click="show">
  </div>
  <script src="./lib/vue-2.4.0.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>1111</h1>',
        my: '11111'
      },
      methods: {
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>
</body>

倒序效果

<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <input type="button" value="1" @click="lang">
    <input type="button" value="2" @click="stop">
    <h4>{{ msg }}</h4>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'dashu',
        intervalId: null
      },
      methods: {
        lang() {
          if (this.intervalId != null) return;

          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
            var end = this.msg.substring(1)
            this.msg = end + start
          }, 600)

        },
        stop() {
          clearInterval(this.intervalId)
          this.intervalId = null;
        }
      }
    })
  </script>
</body>

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获事件的机制
.self 实现只点击当前元素，才会触发事件
.once 只触发一次事件

v-model 指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123'
      },
      methods: {
      }
    });
  </script>
</body>

</html>

计算器

var Str = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval(Str)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { 

          switch (this.opt) {
            case '+':
              this.result = parseInt(this.n1) + parseInt(this.n2)
              break;
            case '-':
              this.result = parseInt(this.n1) - parseInt(this.n2)
              break;
            case '*':
              this.result = parseInt(this.n1) * parseInt(this.n2)
              break;
            case '/':
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } 

        }
      }
    });
  </script>
</body>

</html>

vue样式

<h1 class="red"></h1>

<h1 :class=" [ 'red', 'green' ] "></h1> 绑定数组

<h1 :class=" [ 'red', 'green', flag?'active':'' ] "></h1> 三元表达式

<h1 :class="classObj">123</h1>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, green: true, active: false }
      },
      methods: {}
    });
  </script>

样式：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- <h1 :style="ss">12</h1> -->

    <h1 :style="[ ss, ee ]">123</h1>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        ss: { color: 'red', 'font-weight': 200 },
        ee: { color: 'red' }
      },
      methods: {}
    });
  </script>
</body>

</html>

for 循环

// 数组对象
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p v-for="(item, i) in list">{{ item.id }} - {{ item.name }} - {{i}}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'd' },
          { id: 2, name: 'dd' },
          { id: 3, name: 'ddd' },
          { id: 4, name: 'dddd' }
        ]
      },
      methods: {}
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">

    <p v-for="(item, i) in list">{{i}} - {{item}}</p>

  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4 ]
      },
      methods: {}
    });
  </script>
</body>

</html>
// 循环对象
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p v-for="(val, key, i) in user">{{ val }} -- {{key}} -- {{i}}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: 'da',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>
</body>

</html>
// 迭代数字
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dashu</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p v-for="count in 6"> {{ count }} </p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>

key属性使用

<p v-for="item in list" :key="item.id">
 <input type="checkbox">{{item.id}} --- {{item.name}}
</p>

add() {
 this.list.unshift({ id: this.id, name: this.name })
}

v-if 每次都会重新删除和创建元素，性能消耗高
v-show 每次不会重新创建，初始渲染消耗高

vue 中绑定样式两种方法：

v-bind: class     v-bind:style

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

原文地址：https://www.cnblogs.com/dashucoding/p/10448571.html

时间： 2024-10-10 20:42:29

Web前端-Vue.js必备框架（一）的相关文章

web前端Vue+Django&#160;rest&#160;framework&#160;框架&#160;生鲜电商项目实战视频教程 学习

web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframework的官网是打不开的 2.安装依赖包 如图所示,django restframework的依赖模块,除了coreapi和django-guardian,已经在前面安装过了. 打开终端,执行安装命令

JavaScript是WEB前端开发的必备技能

在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门小语言被重视了起来. 现在,很多公司会招专门的JavaScript工程师,通常JavaScript是WEB前端开发的必备技能.简单介绍了JavaScriptr的好处,并不代表大家就会去学习甚至把它学好,兴趣是很关键的,我认为兴趣是最好的老师,

从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.Vue发送Aj

从零开始学 Web 之 Vue.js（三）Vue实例的生命周期

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.vue实例的生

web前端开发工程师必备技能

看到这个标题的大都是前端开发边缘的同学,有多少能直言不讳的说自己是前端工程师呢?不是打击谁谁谁,而是我们需要反思一个问题:什么才是真正意义上的前端开发呢? 前端开发这个职业始于几年前,至今已发展的初步成熟了.如果你打算进入这个行业,你要做好的准备,因为要学的要懂得的实在不少:如果你已经在这个行 业一两年了,也请你不要放弃对前端开发的继续追寻和研究:更老一点的,也就不能说什么了,是你们让更好的前端发展至今,在此抱以感激! 上述一段,也就是把前端的开发者总概了一下,下面我们来看看前端需要什么技能?

Java Web前端到后台常用框架介绍

转自: http://blog.csdn.net/u013142781/article/details/50922010 一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,Spri

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

10个web前端jQuery开发者必备的源码组件

1.Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS Conditioniz 是一个快速.轻量级(3KB)的 JavaScript 工具,用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件.Conditioniz 从它的 jQuery 前身重建,现在速度要快50%.结合类名添加和 Conditionizr 集成的脚本和样式加载功能,允许你为不同的浏览器指定想加载的脚本和样式.浏览器嗅探通常被认为是不可靠的,Conditionizr 的建立就

web前端 -- vue -- vue cli脚手架

搭建 vue-cli 脚手架 1. 依赖的环境是:node.js 1.1.检测node和npm版本 node.js 官网下载页,选择 windows 系统 msi 安装版本,一路 next 安装. 要有6.9以上的node:node-v 要有3.10以上的npm:npm -v 附:安装node.js 1.2. 安装全局 vue cli Linux下使用命令:sudo npm install --global vue-cli windows下:npm install --global vue-cl