Vue入门(一)
导入js
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue使用基本框架
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
页面结果:
Hello Vue
Vue指令
v-bind
- v-bind:标签属性=“绑定vue对象中的data对象中的变量/对象”
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<div v-bind:title="message">
绑定div的title属性!
</div>
<div :title="message">
绑定div的title属性!(简写)
</div>
- v-bind内部支持各种表达式
.A{
background: red;
}
var vm = new Vue({
el:'#app',
data:{
isAClass:true
}
});
<div :title="message" :class="isAClass?A:''">
v-bind内部支持表达式
</div>
<!-- 若isAClass为true,则该div标签的样式动态改变为A类的样式 -->
<div :title="message" :class="{A:isAClass}">
v-bind内部支持对象形式
</div>
v-text
- 和{{}}有同样的效果,但会完全覆盖元素中的text
- 支持写表达式
<div v-text="message">
</div>
v-html
- 可内嵌html标签
- 使用同v-text
v-on
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
});
</script>
<input type="text" @keyup.enter="helloWorld"/>
<!-- keyup好像只能在input标签中使用 -->
小结
- 创建Vue示例时:el(挂载点),data(数据),methods(方法)
- v-on指令的作用是绑定事件,简写为@
- 方法中通过this关键字获取data中的数据
- v-text指令的作用是:设置元素的文本值,简写为{{}}
- V- html指令的作用是:设置元素的innerHTML
v-show
- 绑定图片的显示与隐藏
- 支持表达式和变量
<div id="app">
<img src="地址" v-show="true" />
<img src="地址" v-show="isShow" />
<img src="地址" v-show="age>=18" />
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
v-if
- 效果与使用同v-show
- 不同的是,表达式为true时元素存在于dom树中,表达式为false时元素从dom树中移除
v-for
- 生成多个模板结构
<div id="app">
<ul>
<li v-for="(url,index) in arr">
<a :href="arr[index]">{{url}}</a>
</li>
</ul>
</div>
var vm = new Vue({
el:'#app',
data:{
message:"hello vue",
arr:["http://www.baidu.com/","http://bilibili.com"]
}
});
v-model
- 双向绑定表单元素的值
<input type="text" v-model="message"/>
<input type="button" value="ClearMessage" @click="clearMessage"/>
{{message}}
- JS如下:
var vm = new Vue({
el:'#app',
data:{
message:"hello vue"
}
methods:{
clearMessage:function(){
this.message="";
}
}
});
``