前言
Vue是现在很火的一个前端MVVM框架,面向数据的,它是以数据驱动和组件化的思想构建,与langular 和react齐名,就是咱们常说的前端三大框架 .
核心思想就是: ~~ 操作数据 !!!
安装(引用Vue)
直接引入script 就行了,代码如下:
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>测试</p>
<p>{{ message }}</p>
<input v-model="message">
<button type="button" v-on:click="showMsg" >点击调用showMsg方法</button> //点击事件
<select v-on:change="showChangeMsg" >
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>
//选择事件
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello',
url:'www.baodu.com'
},
methods:{
showMsg:function(){
alert(this.message)
},
jumpUrl:function(){
location.href = this.url
},
showChangeMsg:function(){
alert('改变选择')
}
}
})
</script>
</body>
</html>
效果图
我们在HTML代码里面设置了一个id为’‘app’'的div, 然后在javascript里面实例化了一个属性el为 '#app’的Vue对象, 表示这个Vue对象用来处理该div的显示.
接着在Vue对象的data属性里面设置了一个message字段, 把这个字段和页面的p元素和input元素双向绑定起来
这样只要message字段改变,p元素的内容也会相应的改变. 输入的内容改变 message就会改变 这样p元素也会做出相应的改变;;;是不是很神奇 谨记 v-model这个标签哦~~
vue实例组成
三个部分,也就是最基本的 el属性用来指定绑定的页面容器 data属性用来存放页面展示的数据 methods属性用来放置页面调用的方法 都跟页面有关系,这也是Vue的核心思想,直接操作页面,直接操作数据 …
当然了重点就是
data属性里面的字段如何与页面绑定(数据绑定),
methods属性里面的方法如何与页面交互(事件绑定)
数据绑定
1.文本
span>消息: {{ message }} /span>
2.原始html
span v-html=“htmlCode”> /span>
3.列表
span v-for=“item in list”>{{item}} /span>
4.条件
span v-if=“isHuman”>我是好人 /span>
span v-else>我不是好人 /span
5.属性
a v-bind:href=“url”>这是一个链接 /a>
img :src:href=“imgUrl” alt=“这是一张图片” />
6.表达式
span>1+1=: {{ 1+1 }} /span>
事件绑定
效果如下图:[(
工作中我们经常会用到是这样的
methods:{
...
},
showChangeMsg:function(){
$.post('api接口',function(data){
location.href = this.url
});
}
}
})
好了,暂时先写这么多,我也是在学习中,后期会继续补充...
7784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
