最近用到了Vue所以了解了一下,发现很好用,所以学习一下,在这里呢把学习的过程分享给大家,话不多说直接上代码
<html>
<head>
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{m}}
</div>
<div id="app-2">
<span v-bind:title="message"> <!--v-bind :这个特性被称为指令,前缀v- 代表他们是vue提供的特殊特性
他们会在渲染的dom上应用特殊的响应式行为,在这里,该指令的意思是:“将这个元素节点的title特性和vue实例的message属性保持一致”
-->
鼠标悬停几秒查看此处动态绑定的提示信息!
</span>
<a v-bind:href="lin" style="">点我打开百度</a>
</div>
<h2>选择与循环</h2>
<div id="app-3">
<p v-if="seen">现在你看到我了</p> <!--绑定选择结构-->
<!--这个例子演示了我们不只可以把数据绑定到dom文本或特性,还可以绑定到dom结构,
此外,vue也提供了一个强大的过渡效果,可以在vue插入,更新,移除元素时自动应用过渡效果-->
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos"> <!--绑定循环结构-->
<!--v-for 指令可以绑定数组的数据来渲染一个项目列表-->
<!--次实例 绑定了 数组名为todos的数组来渲染ol项目列表-->
{{todo.text}}
</li>
</ol>
</div>
<h2>处理用户输入</h2>
<!--为了让用户和应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过这个事件监听器调用在vue实例中定义的方法-->
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转消息</button><!--这个实例我们使用v-on指令给button绑定了一个单击事件,调
用vue中定义的reverseMessage方法-->
</div>
<!--vue还提供了v-model指令,它能轻松实现表单输入和应用状态之间的双向绑定-->
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app=new Vue({
el:'#app', //id名
data:{
m:'页面加载于'+new Date().toLocaleString(),
}
});
app.m='hello vue!'//当app.m与元素的文本绑定时,我们可以通过改变app.m这个变量的值来改变元素的
var app2=new Vue({
el:"#app-2",
data:{
message:'页面加载于'+new Date().toLocaleString(),
lin:'http://www.baidu.com'
}
})
app2.message='你好' //当app2.message与元素的title特性绑定时,我们可以通过改变app2.message的值来改变元素的title特性的值
var app3=new Vue({
el:"#app-3",
data:{
seen:true //seen=true 时,元素展示在页面上,为false时在页面上隐藏
}
})
app3.seen=false //当app3.seen与元素的if结构绑定时,我们可以通过改变app3.seen的值来控制元素的显示和隐藏
var app4=new Vue({
el:'#app-4',
data:{todos:[
{text:'学习javascript'},
{text:'学习vue!'},
{text:'vue适合后学'}
]}
})
app4.todos.push({text:'新添加的项'}) //向todos数组中添加一个数据,
//app4.todos与元素的for结构绑定时,我们可以通过向数组中添加元素的方式给html元素ol添加新项
var app5=new Vue({
el:'#app-5',
data:{
message:'hello vue.js'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('') //在这个方法中我们更新了应用的状态,但没有碰触dom,
//所有的dom操作都由vue来处理,我们编写的代码只需要关注逻辑层面
}
}
})
var app6=new Vue({
el:"#app-6",
data:{
message:'hello vue!'
}
})
</script>
</body>
</html>
希望能给大家提供一些帮助,但其实就是自己的一个学习笔记,如果对大家帮助不大,请多海涵