Vue 快速入门
Vue框架介绍中文文档:? Vue是一个构建数据驱动的web界面的渐进式框架。 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。 能够构建复杂的单页面应用。现在我们开始认识一下Vue~ 你的名字是{{name}}
<span style="color: #008000;">// <span style="color: #008000;"> main.js 页面<span style="color: #0000ff;">var app = <span style="color: #0000ff;">new<span style="color: #000000;"> Vue({ el: '#app'<span style="color: #000000;">,data: { name: "Gao_Xin"<span style="color: #000000;"> } }); Vue指令Vue的指令directives很像我们所说的自定义属性,指令是Vue模板中最常用的功能, 它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上。 head
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <span style="color: #008000;">// <span style="color: #008000;"> main.js 页面<span style="color: #0000ff;">var app = <span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
你的爱好是
你喜欢的食物
事件
app = '#app'"mouse enter""mouse leave""key up"
="role == 'admin' || 'super_admin'">管理员你好
-="role == 'hr'">待查看简历列表
> 没有权限
app = '#app'""""
.bottom.right="pinned">
}
</span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
el.style.position </span>= 'static'<span style="color: #000000;">;
el.style.background </span>= "#eeeeee"<span style="color: #000000;">
}
}); el: '#app'<span style="color: #000000;">,data: { pinned: <span style="color: #0000ff;">false<span style="color: #000000;">,} }); Vue获取DOM元素<span style="color: #0000ff;"></ <span style="color: #800000;">head<span style="color: #0000ff;">><span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">id<span style="color: #0000ff;">="app"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> ref<span style="color: #0000ff;">="my_box"<span style="color: #0000ff;">><span style="color: #000000;"> 这是一个盒子 <span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">script<span style="color: #0000ff;">><span style="background-color: #f5f5f5; color: #000000;"> <span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">> Vue计算属性我们的模板表达式非常的便利,但是逻辑复杂的时候,模板会难以维护,vue提供了计算属性。 我们用方法也能达到效果,那么我们为什么要用计算属性呢~ 其实在vue中方法和计算属性达到的效果是一样的,但是计算属性是基于依赖进行缓存的, 只有依赖的数据发生改变的时候,才会重新执行计算属性的函数,每次调用都会从缓存中拿之前算好的数据。 而方法是每调用一次,执行一次。 学科 |
分数 |
|
| |
Vue过滤器
过滤器是在数据到达用户的最后一步进行简单的过滤处理,复杂的还是要用计算属性或者方法。
价格展示
| currency('USD'换算
|val = val || 0<span style="color: #000000;">;
<span style="color: #0000ff;">return (val/1000).toFixed(2) + "米"
<span style="color: #000000;">});
<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el: '#app'<span style="color: #000000;">,data: {
price: 10<span style="color: #000000;">,meters: 10<span style="color: #000000;">,}
});
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!