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-showv-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.jsAngular.jsReact.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

结言

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

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

作者简介

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

Web前端-Vue.js必备框架(一)的更多相关文章

  1. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  2. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  3. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  4. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  5. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  6. Web - 前端 Vue.js (1)

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  7. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  8. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

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

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

随机推荐

  1. 炫酷MD风之dialog各种对话框

    这个demo也是我从别人那里学来的,不是本人写的代码,我也是个MD初学者.把这个demo分享给看到的你,希望对你有帮助. 直接上图: demo地址:百度网盘:链接:https://pan.baidu. ...

  2. 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...

  3. Mybatis order by语句使用<Choose><When>动态拼装无效的原因及解决方法

    在使用 <choose> <when test=""> </when> <otherwise> </otherwise> ...

  4. 非WifI环境处理

    //1.创建网络状态监测管理者 AFNetworkReachabilityManager *mangerStatus = [AFNetworkReachabilityManager sharedMan ...

  5. NC 数据库操作

    一.后台数据库操作方法(private端): 1.以下为后台查询方法 BaseDAO dao = new BaseDAO();//只能在private端使用 String querySql=" ...

  6. Naïve Media Player

    我的GitHub链接:https://github.com/Joyce45/hwt 一.播放器?怎么做? 提到播放器,首先想到的就是XAML控件库里的MediaElement,于是我又大致阅读了一下该 ...

  7. centos7.5搭建cdh5.13.0

    序言 本文集群搭建为三台机器,cdh版本为5.13.0,以下是安装过程中所用到的软件包等,可以自行下载.一.前期准备1.安装环境 系统:centos7.5/最小安装版本/64位 内存:主节点 --&g ...

  8. IntelliJ IDEA 控制台中文乱码解决方案

    配置Intellij的配置文件(在idea安装目录bin目录下) 打开Intellij的根目录,找到下图的两个文件(根据你的系统是32位或64位选择其中一个配置文件),在配置文件中添加: -Dfile ...

  9. [swarthmore cs75] Compiler 2 – Boa

    课程回顾 Swarthmore学院16年开的编译系统课,总共10次大作业.本随笔记录了相关的课堂笔记以及第4次大作业. A-Normal Form 在80年代,函数式语言编译器主要使用Continua ...

  10. scrapy的入门使用(二)

    1. scrapy实现翻页请求 找到下一页的url地址 构造url地址的请求,传递给引擎 1.1 实现翻页请求 使用方法 在获取到url地址之后,可以通过scrapy.Request(url,call ...