加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Vue 快速入门

发布时间:2020-12-16 23:18:17 所属栏目:百科 来源:网络整理
导读:Vue框架介绍 中文文档:? Vue是一个构建数据驱动的web界面的渐进式框架。 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。 能够构建复杂的单页面应用。现在我们开始认识一下Vue~ 你的名字是{{name}} span style="color: #008000;"// span s
app = '#app'908878 total = .math + .physics + average_num = Math.round(.sum/3)

Vue过滤器

过滤器是在数据到达用户的最后一步进行简单的过滤处理,复杂的还是要用计算属性或者方法。

价格展示

| currency('USD'

换算

|
Vue.filter('currency',= val || 0 ret = val+Vue.filter('meter',<span style="color: #0000ff;">function<span style="color: #000000;"> (val) {
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;">,}
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

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上。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;
<script src="../js/main.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({
el: '#app'<span style="color: #000000;">,data: {
<span style="color: #008000;">//<span style="color: #008000;"> sex: "male",
<span style="color: #000000;"> sex: [],}
});

app = '#app'"这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。"
app = '#app'
你的爱好是
  • ="hobby in hobby_list">{{hobby}}
你喜欢的食物
  • ="food in food_list">{{food.name}}: 价格¥{{food.discount ? food.price*food.discount: food.price}}
app = '#app'"王者毒药","LOL","吃鸡""葱"58"姜"8
app = '#app'"http://baidu.com"
事件
app = '#app'"mouse enter""mouse leave""key up"
="role == 'admin' || 'super_admin'">管理员你好
-="role == 'hr'">待查看简历列表
> 没有权限
app = '#app''admin'

app = '#app'.show = !});

app = '#app'""""
.bottom.right="pinned">
Vue.directive('pin', binded = position = warning == 'fixed'( key = '20px' (warning === 'true'= '#666'} </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; { el.style.position </span>= 'static'<span style="color: #000000;"&gt;; el.style.background </span>= "#eeeeee"<span style="color: #000000;"&gt; }

});
<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
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;">
const app <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #0000ff;">new<span style="background-color: #f5f5f5; color: #000000;"> Vue({
el: <span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">#app<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,mounted(){
<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.$refs.my_box.style.color <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">red<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">;
}
})
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>

Vue计算属性

我们的模板表达式非常的便利,但是逻辑复杂的时候,模板会难以维护,vue提供了计算属性。

我们用方法也能达到效果,那么我们为什么要用计算属性呢~

其实在vue中方法和计算属性达到的效果是一样的,但是计算属性是基于依赖进行缓存的,

只有依赖的数据发生改变的时候,才会重新执行计算属性的函数,每次调用都会从缓存中拿之前算好的数据。

而方法是每调用一次,执行一次。

学科 分数
    推荐文章
      热点阅读