从零开始学vue
高手坟墓丶
转知乎了https://www.zhihu.com/people/yang-jian-04-12
挖掘机大手,dotA天梯和尼古拉斯赵四一样,篮球准星和隆多一样。
展开
-
hello vue!
新建一个hello.html文件,输入以下内容:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> {{ message }} </div> <script type="text/javas原创 2017-11-07 21:35:00 · 225 阅读 · 0 评论 -
计算属性
对于复杂逻辑,应当使用计算属性:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="example"> <p>Original message:"{{ msg }}"</p> <p>Computed原创 2017-11-09 09:17:10 · 239 阅读 · 0 评论 -
缩写
v-bind缩写:<!-- 完整语法 --><a v-bind:href="url">click</a><!-- 缩写 --><a :href="url">click</a>v-on缩写:<!-- 完整语法 --><a v-on:click="doSomething">click</a><!-- 缩写 --><a @click="doSomething">click</a>原创 2017-11-08 16:23:24 · 244 阅读 · 0 评论 -
v-bind:href
<a v-bind:href="url">...</a> 将该元素的href属性与表达式url的值绑定。<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <a v-bind:href="url">c原创 2017-11-08 16:07:31 · 5602 阅读 · 1 评论 -
v-text和v-html
v-text和{{}}一样v-text不解释标签,v-html解释标签解释html标签可能导致xss攻击,不要使用用户提供的内容插值<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{m原创 2017-11-08 15:33:27 · 12053 阅读 · 0 评论 -
v-once
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>可以改变:{原创 2017-11-08 15:08:17 · 2586 阅读 · 0 评论 -
v-on
为了与用户交互,可以用v-on指令绑定一个事件监听器,通过该监听器调用Vue实例中定义的方法:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{msg}}</p> <butt原创 2017-11-08 10:33:00 · 330 阅读 · 0 评论 -
组件
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,在 Vue 中注册组件很简单:<html><head> <title></title> <script src="./vue.js"></script></head><body> <div原创 2017-11-08 14:12:32 · 218 阅读 · 0 评论 -
v-model
该指令能够实现表单输入和应用状态之间的双向绑定:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{msg}}</p> <input v-model="msg"> </di原创 2017-11-08 10:38:29 · 360 阅读 · 0 评论 -
v-for
v-for指令可以绑定数组的数据来渲染一个项目列表:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <li v-for="todo in todos"> {{todo.tex原创 2017-11-08 10:17:59 · 328 阅读 · 0 评论 -
v-if
控制切换一个元素的显示与否:<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <span v-if="seen"> 我出现了! </span> </di原创 2017-11-08 10:09:41 · 575 阅读 · 0 评论 -
v-bind
<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <span v-bind:title="msg"> 鼠标悬停几秒查看此处动态绑定的提示信息! </span>原创 2017-11-08 09:53:19 · 348 阅读 · 0 评论 -
vue-todoList-demo with localstorage
徘徊了好久,看了react和vue,听取了面试官的意见,我要开始学vue了:)下面这个是刚学习的一个vue的todolist,和vue官网的那个不一样,这个有localstorage,刷新后还可以用哦!这里下载源码。 视频地址原创 2017-11-11 22:20:25 · 252 阅读 · 0 评论