1.前言
其实对于我来说,学校的知识对于毕业找工作是肯定不够的,所以只能不断的扩充自己学习一些新的知识,技术更迭变化也挺快的。所以我vue进行一个简单的学习。
2.模板及其简单的语法
1.简单要素介绍
<body>
<div id="hellovue">
<p>{{label}}</p>
</div>
<script>
new Vue({
el:'#hellovue',
data:{
label:'hello vue!'
},
methods:{
},
})
</script>
</body>
- {{label}} 这个双括号括起来的是文本插值是用来进行数据的绑定的。使用vue的data进行声明我们所需要的数据,以上的例子我将 <p>的内容改为了“hello vue”。
简而言之:{{}} 用于输出对象属性和函数返回值
- el 可以用来指定DOM的id,以方便我们对知道的DOM进行修改一些数据添加一些函数.
- method 就是函数,可以使用return来返回值,它包含了页面的整个逻辑以及一些触发事件。
2.模板语法的介绍
- v-html 用于输出html的代码,以标签的新式更新
<body>
<div id="hellovue">
<p>{{label1}}</p>
<p v-html="label2"></p>
</div>
<script>
new Vue({
el:'#hellovue',
data:{
label1:"仅修改文本",
label2:'<h1>这里是标签语言(标题)</h1>'
},
})
</script>
</body>
2.v-text 对有该语句的元素的内容进行替换
注:此处和插值表达式不同的是,它会对整个元素内容进行替换,比如说我替换的内容是hello
<p>{{label}} vue</p>
结果为:hello vue
<p v-text='label'>vue</p>
结果为:hello
<body>
<div id="hellovue">
<p v-text="label2">123456</p>
</div>
<script>
new Vue({
el:'#hellovue',
data:{
label2:'我不是123456'
},
})
</script>
</body>
3.v-cloak 可以解决页面使用插值表达式闪烁的问题
<div v-cloak>{{ok}}</div>
<style type="tetxt/css">
[v-cloak]{
display:none;
}
</style}
4.v-model 实现了数据的双向绑定,它会使另一方的元素 同时发生改变
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue!'
}
})
</script>
</body>
注:当文本框输入内容时,绑定的message内容也发生改变
5.v-once 指的是指令指渲染一次,使用了该指令的元素、组件和所有的节点,都会当作静态内容并跳过。(可用于优化更新性能)
<body>
<div id="app">
<p v-once>渲染一次数据:{{text}}</p>
<p>可以改变的数据:{{text}}</p>
<p ><input type="text" v-model = "text"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
text:"当前内容 "
},
methods:{
},
})
</script>
</body>
6.v-on 可以用来绑定事件也可以用来传递参数
<body>
<div id="onclick">
<p>{{message}}</p>
<input type="button" value="单击事件" v-on:click="alert">
</div>
<script>
new Vue({
el:'#onclick',
data:{
message:'ok'
},
methods:{
alert:function() {
this.message='chagetext'
}
},
})
</script>
</body>
注;v-on 可以缩写为@click
7.v-if 根据表达式v-if(我这里使用了bool)的值(true 或 false )来决定是否插入 p 元素
<body>
<div id="exchange">
<input type="button" value="显示/不显示" @click="exchange">
<p v-if="bool">显示成功</p>
</div>
<script>
new Vue({
el:'#exchange',
data:{
bool:false
},
methods:{
exchange:function(){
this.bool=!this.bool;
}
},
})
</script>
</body>
8.v-show 效果与v-if相同 就不进行代码演示
区别:v-if 删除和添加DOM元素
v-show 只是改变了DOM元素的display样式的真和假
显然对以上的区别来说v-if切换的渲染消耗更高,v-show的初始渲染消耗更高.
9.v-bind 用于更改元素的属性名
v-bind 可以缩写为':'
如: v-bind:src='url' 可以改写为 :src='url'
<body>
<div id="app">
<pre><a v-bind:href="url">百度一下 </a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
})
</script>
</body>
3.总结
以上就是我对初学vue2.0的一些入门总结
参考了一下博客和资料:Vue新手入门指南(易懂)_liuzhaoh的博客-CSDN博客_vue新手入门