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>
结言
好了,欢迎在留言区留言,与大家分享你的经验和心得。
感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。
作者简介
达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。
相关文章
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
- HTML Tags containing Vue.js v-if and v-for directives flash at loading
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- js,jq滚动监听,切换等常用JS代码
- 【Vue/Js】如何判断json对象为空或undefined未定义?(已解决)
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- vue.js+koa2项目实战(二)创建 HeadBar 组件
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目
- Vue.js / Nuxt.js / uni-app - 移动端 H5 网页,在电脑 PC 上打开时居中显示(手机网页在电脑上打开后,简单粗暴防止 “界面样式“ 拉伸变形的解决方案)适用所有web项目
- Web前端-Vue.js必备框架(五)
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- Vue.js中this.$nextTick()的使用
- Vue---this.$route和this.$router这两个对象--都需要在router.js 中配置
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue实现全屏滚动,非fullpage.js
- Vue-cli 4在vue.config.js中配置别名
- Web 前端 之 Vue 浏览器调试工具 Vue.js devtools 安装(三种方法)的简单整理
- 包学会之浅入浅出Vue.js:升学篇