Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架（三）
vue是一款渐进式javascript框架，由evan you开发。vue成为前端开发的必备之一。
vue的好处轻量级，渐进式框架，响应式更新机制。
开发环境，浏览器使用chrome，ide：vs code或者webstorm，node.js8.9+，npm等
uni-app直接使用<script>引入vue.js，vue会被注册为一个全局变量，开发环境不要使用压缩版本，一：开发版本有完整的警告和调式模式，二：生产版本删除了警告。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
生产环境：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
开发：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<ol>
<todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li class="text"> {{ todo.text }} </li>'
})
var app = new Vue({
el: '#app',
data: {
message: 'hello',
arrList: [{
id: 0,
text: 'da'
},{
id: 1,
text: 'shu'
}]
}
})
</script>
</body>
</html>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello',
}
})
</script>
</body>
vue CLI
npm install -g @vue/cli
vue create hello
cd hello
npm run serve
属性：自定义属性，原生属性，特殊属性。
组件中props中声明属性。
vue组件=vue实例=new Vue(options)
每一个vue组件都是一个vue实例，vue实例通过new vue函数创建的。
事件：普通事件，修饰符事件。
@click @input @change 普通事件
@input.trim @click.stop @submit.prevent 修饰符事件
<template>
<div>
name: {{ name || "--" }}
<br/>
<input :value="name" @change="handleChange"/>
<br/>
<div @click="handleDivClick">
<buttom @click="handleClick">成功</button>
<button @click.stop="handleClick">失败</button>
</div>
</div>
</template>
<script>
export default {
name: "EventDemo",
props: {
neme: String
},
methods: {
handleChange(e) {
this.$emit("change", e.targer.value);
},
handleDivClick() {
this.$emit("change", "");
},
handleClick(e) {
//e.stopPropagation();
}
}
};
</script>
插槽：普通插槽和作用域插槽。
<template slot="#"></template>
<template v-slot:#></template>
<template slot="#" slot-scope="props"></template>
<template v-slot:#="props'></template>
<a-tab-pane key="event" tab="事件">
<Event :name="name" @change="handleEventChange"/>
</a-tab-pane>
<a-tab-pane key="slot" tab="插槽">
<h2>新语法</h2>
<$lotDemo>
<p></p>
<template v-slot:title>
<p>title</p>
<p>tiltle</p>
</template>
<template v-slot:item="props">
<p>item {{ props }} </p>
</template>
<$lotDemo>
<br/>
</a-tab-pane>
<template>
<div>
<slot/>
<slot name="title"/>
<slot name="item" v-bind="{ value: 'vue' }"/>
</div>
</template>
<script>
export default {
name: "SlotDemo"
};
</script>
小结：
属性，自定义属性：props，原生属性：attrs，特殊属性：class，style。
事件：普通事件，修饰符事件。
插槽：普通插槽，作用域插槽。
双向绑定：
model数据的更新会导致view视图的更新，view视图的更新会导致model数据的更新。但vue是单向数据流，Object.defineProperty响应式更新。
// 语法糖
<Personalnfo
v-model="phoneInfo"
:zip-code.sync="zipCode"
/>
<PersonalInfo
:phone-info="phoneInfo"
@change="val => (phoneInfo = val)"
:zip-code="zipCode"
@update:zipCode="val => (zipCode=val)"
/>
状态data和属性props
状态是组件自身的数据，属性来自父组件的数据。
状态和属性的改变都未必会触发更新。
好了！下面开讲：
开发环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
新手不建议用vue-cli哦！
数据渲染：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 1' },
{ text: '学习 2' },
]
}
})
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello dashucoding!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'dashucoding!'
}
})
组件化：
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in gList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
gList: [
{ id: 0, text: '123' },
{ id: 1, text: '456' }
]
}
})
创建一个 Vue 实例
var vm = new Vue({
// 选项
})
$用于区分与用户定义的属性。
v-once执行一次性插值，数据改变后，不会再改变。
v-bind:
修饰符：
<form v-on:submit.prevent="onSubmit">...</form>
v-bind和v-on
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="do"></a>
<!-- 缩写 -->
<a @click="do"></a>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
Web前端-Vue.js必备框架（三）的更多相关文章
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
随机推荐
- 公设基础equals
1# 覆盖equals方法的通用约定 1.自反性(reflexive) 自己跟自己的比较必须返回true 2.对称性(symmetric) x=y那么y=z 3.传递性(transitive) x= ...
- layui报错 "Layui hint: 模块名 xxx 已被占用" 的问题解决方案
由于扩展模块数量众多, 于是我需要将扩展模块分类到二级文件夹中, 我在页面中是这么写的 <script> layui.extend({ courseTask: 'task/courseTa ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165323
1.Kali下载路径 由于之前的课程中已经安装过VMware虚拟机,这一个步骤就省去 2.安装 (1)创建新的虚拟机->典型->添加镜像路径 (2)选择操作系统linux (3)进行虚拟机 ...
- C# 操作docx文档
一.需要引用DocX类库文件,可以直接在NuGet中找到. 二.创建文件,并添加一张表格 public static string fileName = AppDomain.CurrentDomain ...
- IBOS二次开发之视图创建（PHP技术）
在 views 文件夹,我们创建一个跟控制器名称一样的文件夹list,新建一个index.php的视图文件. 我们讨论过多次,最后决定IBOS的视图机制还是以高效为主.因此我们没有使用模板,而是直接使 ...
- 对Inode、Hard Link以及Soft Link的理解
一.EXT2/EXT3等文件系统的分区格式 Linux的文件系统从EXT2开始将文件的属性和文件的实际内容分开存储,文件的属性由inode存储,文件的内容由block存储. 系统在对磁盘进行分区格式化 ...
- EJS 入门学习
EJS(Embedded JavaScript templates)是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本.可以说EJS是一个JavaScript库,EJS可以同时运行在客 ...
- Codeforces 938D. Buy a Ticket (最短路+建图)
<题目链接> 题目大意: 有n座城市,每一个城市都有一个听演唱会的价格,这n座城市由m条无向边连接,每天变都有其对应的边权.现在要求出每个城市的人,看一场演唱会的最小价值(总共花费的价值= ...
- 防御xss 大致理解
前端 发送留言内容 包含 js 代码 后台 管理员 查看 留言 代码被执行 拿到cookie 成功登陆 解决办法 对录入 进行相关的过滤处理 其他解决方法 正在学习中
- 大白话讲解Promise
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...