Vue快速入门
文档
想学习vue,最好的文档就是官网
这里列出几个:
- Vue.js 介绍 — Vue.js 中文文档 (bootcss)
- Vue.js 教程 | 菜鸟教程 (runoob)
第一个vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
</head>
<body>
<div id="app">
{{message}}zass
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- 首先引入vue.js,可以本地,可以用链接,这里附上下载地址
- 然后new vue({}),在el后是用css id选择器绑定到 div中(注意,这里可以用其他选择器,如类选择器等,但是一般使用id,id唯一)
- vue并不能挂载到全部标签上,如body和单标签不能挂载,一般使用div挂载
data
- 使用vue的一个关键就是,vue可以实现很容易实现数据的 绑定
- 所有数据都写在data中,数据类型包括对象,数组,string等
- 组件中要用{{}}包括data中的数据例如{{message}}
- 获取对象属性用 object.property 获取数组数据用下标索引例如 num[0]
vue 指令
-
内容绑定,事件绑定
-
v-text
-
v-text就是设置数据内容和上面的{{message}}相似,不同的是,v-text="message"会把标签里的内容全部替换,而单独的插值表达式{{}}可以和别的数据一起写
-
而且{{}}或""中可以写表达式 例子如下
-
<div id="app"> <div v-text="message">123</div> <div>{{message}}123</div> <div>{{message+"123"}}</div> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
-
-
v-html
-
v-html是设置标签的innerHtml
-
<div v-text="htmlTest"></div> <div v-html="htmlTest"></div> <script> var app = new Vue({ el: '#app', data: { htmlTest:'<h2>一起进步鸭<h2>' } }) </script>
-
-
v-on
-
v-on就是为元素绑定事件
-
v-on:click=“方法名”,v-on:mouseenter="方法名"等,也可以简写 用@代替v-on: 例如 @click=“方法名”
-
vue 方法要写在methods中,和data平级
-
<input type="button" value="事件"v-on:click="onClick"></input> <input type="button" value="鼠标移入" @mouseenter="ent"></input> <script> var app = new Vue({ el: '#app', methods: { onClick() { alert("button被点击") }, ent(){ alert("鼠标进入") } } }) </script>
-
通过this.数据名改变,实现双向绑定
-
<h2 @click="changeStudy">{{study}}</h2> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { study:"学习" }, methods: { changeStudy(){ this.study+="使我快乐" } } }) </script>
-
-
-
显示切换,属性绑定
-
v-show
- v-show就是控制元素的显示或隐藏
- v-show=true显示,v-show=false隐藏,也可以写表达式
-
v-if
- 根据表达值的真假,切换元素的显示和隐藏(操纵dom元素),通过v-if=“true”,控制dom创建,否则不创建和v-show区别就是,v-show控制disply,通过样式控制
- 建议频繁切换的元素用v-show
-
v-bind
-
主要用来给 组件属性绑定数据
-
<image v-bind:src="imgSrc"></image> //简写 <image :src="imgSrc"></image> //控制类名绑定 <image src="" :class="{img:isRight}"></image> <image src="" :class="isRight?'img':''"></image>
-
-
-
列表循环表单元素绑定
-
v-for
-
根据数据生成列表结构,把模板和包括的内容生成若干份
-
<ul> <li v-for="item in arr" :title="item"> 你好呀 </li> <li v-for="(item,index) in arr"> 你好呀{{index}} </li> </ul>
-
-
v-on
-
可以给事件传递参数在()里写即可,定义方法要有形参
-
事件修饰符
-
<input placeholder="输入" type="text" @keyup.enter="sayHi">
-
-
v-model
-
实现表单数据的双向绑定,即改变vue中数据会改变表单数据,表单数据改变也会同时改变vue数据,v-model会改变表单value
-
<input placeholder="用户名" v-model="username"> <div>{{username}}</div>
-
vue.js下载地址
提取码:1234
-
-
更多推荐
Vue快速入门(含下载地址)
发布评论