vue总结1

最新推荐文章于 2024-07-18 13:56:07 发布

x_1213

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量131

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/x_1213/article/details/121089795

版权

1.引入vue.js库

<div id="app">
hello Vue!
</div>
4.完整的helloWorld代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>

模板语法-文本语法
文本
数据绑定最常见的形式就是使用{{}}语法 (双大括号)

<span> {{message}}</span>
也可以使用v-text方法

<span v-text="message"></span>
html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
<div v-html="rawMsg"></div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
rawMsg:'<h1>你好vue</h1>'
}
})
</script>
模板语法-属性
给html标签绑定一个属性值应该使用 v-bind:属性名称

以下代码给h1绑定一个新的id和title属性

<div id="app">
<h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
dyId:'best',
dyTitle:'看见我的人一生平安'
}
})
</script>
渲染结果是：

<h1 id="best" title="花开富贵邀请您加入相亲相爱一家人">看到我的人一生平安</h1>
绑定属性也是可以直接简写：

<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>

使用 JavaScript 表达式
在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{4+6}}
{{ ok ? 'YES' : 'NO' }}
{{['飞飞','马飞飞'].join('--')}}

{{ var a = 1 }}


{{ if (ok) { return message } }}

条件指令 v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

<div v-if="isLogin">你好，同学！</div>
<div id="app">
<div v-if="isLogin">你好：同学</div>
<div v-else="">请登录后操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>
v-show指令
另一个用于根据条件展示元素的选项是 v-show 指令

<h1 v-show="isShow">Hello!</h1>
v-show 只是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

基本用法
<li v-for="item in items">
{{item}}
</li>

var app=new Vue({
el:'#app',
data:{
items:['angular','react','vue',jquery]
}
})
对象循环输出
<li v-for="item in items">
{{item.name}}--{{item.age}}
</li>
var app=new Vue({
el:'#app',
data:{
items:[
{name:"feifei", age:28},
{name:"mf", age:22},
{name:"马飞飞", age:20},
]
}
})
key
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

<li v-for="(item,index) in items" :key="index">
{{item}}
</li>
var app=new Vue({
el:'#app',
data:{
items:['飞飞','马飞飞','feifei','mafei']
}
})
如果不绑定tip 重复的'mumu' 再列表循环在列表循环会报错

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app">
<button v-on:click="counter += 1">加 1</button>
<p>按钮被点击了 {{ counter }}次.</p>
</div>

var example1 = new Vue({
el: '#ap',
data: {
counter: 0
}
})
事件处理方法
<div id="app">
<button v-on:click="greet">问候</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:'Vue.js'
},
methods:{
greet:function(event){
// 'this' 在方法里指向当前 Vue 实例
alert('你好'+this.name+'!');
// 'even' 是元生 DOM事件
if(event){
alert(event.target.tagName)
}

}
}
})
// 也可以用JavaScript 直接调用
app.greet();
</script>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.once

<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat"></a>


<a v-on:click.once="doThis"></a>

侦听器
Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num++">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 1
},
watch:{
'num': function(nval, oval) {
console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
},
}
});

</script>
对象变化监听
我们需要监听对象的属性值是否发生改变用

<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num.age++">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: {age:1}
},
watch:{
'num':{
handler:function(nval, oval) {
console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
},
deep:true
}
}
});
</script>

自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点

<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus="">
</div>

<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>

x_1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue总结1

1.引入vue.js库<script src="vue.js"></script>2.创建vue实例<script> new Vue({ el：'#app', data: {msg:'Hello,Vue.js 2'} })</script>3.完整html导<div id="app"> hello Vue!</div>4.完整的helloWorld代码<!DOCT...
复制链接

扫一扫