新手学习,只需要以引入的方式即可。
在.html
中的head
中加上即可
学编程怎么能少了hello world
Hello World
{{ message }}
如果是本地测试,最好把vue.js下载到本地,下载地址:https://vuejs.org/js/vue.js
MVVM 模式
,当vue 和一个挂载点
绑定之后就可以操作这个挂载点
之下的DOM
元素el
是#app
对应的 {{ message }}
这个div
就相当于一个挂载点{{}}
这就是vue的显示语法,{{message}}
这个的意思是,显示为vue中的 message
字段对应的数据为:hello vue
{{ message }}
这个之外,还可以用
或者
{{}}
语法 还可以用v-text="变量"
或者 v-html="变量"
这种语法的。语法:v-if
,如果v-if=true
就显示,否则不显示
- 苹果
- 橘子
- 香蕉
- 西红柿
- 西红柿
如上,西红柿就不会显示,和v-if
有点像的有v-show
用法和v-if
一样,区别在于
v-if
会把dom元素删除掉v-show
不会把dom元素删除,而是通过style标签隐藏掉
你还要我怎样 要怎样,你突然来的短信就够我悲伤
v-bind
绑定的是DOM元素的属性,当鼠标移到 那行字的时候,title
被触发显示我们自定义的数据
当然v-bind
不只是可以绑定title
属性,
v-bind:value
v-bind:class
v-bind:style
缩写语法::title
,也就是去掉v-bind
,直接:
加html属性,例如上面的可以写成
- {{item}}
- {{item.age}}
v-for
指令根据一组数组的选项列表进行渲染。v-for
指令需要使用item in items
形式的特殊语法,items
是源数据数组并且item
是数组元素迭代的别名。- {{item.age}}
就是加了一个index 索引字段自定义一个组件示例:
Vue.component("fruit-item",{
props:["item"],
template: "{{item.cn_name}}-->{{item.en_name}} "
});
。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用item
属性就是,我们就可以通过item
自定义我们的数据
Hello World
每一个组件就是一个Vue
实例,所以在组件中我们也可以在methods
定义方法时间,也可以定义data
中定义变量。
那我们是不是可以说,每个Vue
示例就是一个组件呢?是
model 绑定
text:{{text}}
男
女
selected:{{selected}}
复选框:
美女:
财富:
长生:
权利:
v-model
指令在表单
、
及
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值而总是将Vue
实例的数据作为数据来源。你应该通过JavaScript
在组件的data
选项中声明初始值。
当你点击按钮的时候,触发按钮事件按钮文字会反转
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。上述代码按钮绑定的事件方法名为:reverseMessage
v-on:click="方法名"
@click
,代码如下
V-STYLE-CLASS
- 苹果
- 橘子
- 香蕉
- 西红柿