本文介绍了Vue.js的基本语法，包括helloworld、v-if/v-show的区别、v-for循环、v-text/v-html的使用、v-on事件绑定、v-model的双向数据绑定、v-bind的属性绑定以及v-pre/v-cloak/v-once的特殊指令。通过实例展示了这些概念，适合Vue初学者入门。
推荐jspang大佬的 vue 视频教程：https://juejin.im/post/5b834971f265da436d7e4a9d
node安装教程：https://www.cnblogs.com/zhouyu2017/p/6485265.html
此篇文章以 script 引入的方式介绍vue基本语法
<script type="text/javascript" src="../assets/js/vue.js" ></script>1.helloworld
最经典的 hello world
<div id="app" >
{{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'你好'
}
})
</script>2.v-if , v-else, v-show
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
<div id="app" >
<p v-if="isLogin" >欢迎回来：chenparty</p>
<p v-else>请登陆</p>
<p v-show="isShow" >O(∩_∩)O</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isLogin:true,
isShow:true
}
})在该例子中，如果 isLogin = false ,那么 欢迎回来根本就不会被加载，如果 isShow 为 false ， 那么 那个笑脸 将会加上 display:none
3.v-for
v-for 就是个 for循环，输出内容的，很常见很好用的一个语句。
如果需要输出序号则这样写：输出序号 v-for 里面这样写: (stu,index) in sortStudets
<div id="app" >
<ul>
<li v-for="item in sortItems" >
{{item}}
</li>
</ul>
<ol>
<!-- 输出 序号 -->
<li v-for="(stu,index) in sortStudets" >
<span>序号：{{index+1}}。</span><span>name:{{stu.name}}</span> <span>age:{{stu.age}}</span> <span>desc:{{stu.desc}}</span>
</li>
</ol>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
items:[3,2,14,56,64,35,73,23],
students:[
{
"name":"张某",
"age":"21",
"desc":"chenparty.com"
},
{
"name":"李某",
"age":"20",
"desc":"lmou"
},
{
"name":"鲸鱼锅",
"age":"22",
"desc":"十年的兄弟"
}
]
},
// 排序
computed:{
sortItems : function(){
return this.items.sort(function(a,b){
return a-b;
})
},
sortStudets : function(){
return this.students.sort(function(a,b){
return a.age - b.age;
});
}
}
})
</script>4.v-text-html
据说 v-html要少用，因为可能会引起 xss 攻击
<div id="app" >
<p v-text="message" ></p>
<div v-html="dom" ></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。",
dom:"<h1>v-html 可以输出 html。v-text是读不出来的。</h1>"
}
})
</script>v-text 就是 解决了网速慢或者报错的时候显示 {{message}} 这样的源码对用户不友好
5.v-on
on，onclick，onmouseover，onkeydown.... 等等一系列事件，都可以用 on 来绑定
<div id="app" >
<p>status:{{msg}}</p>
<div
v-on:mouseover="over"
@mouseout="out"
style="width:300px;height:300px;border:1px solid #f00;" ></div>
<input type="text" @keydown.enter="keydown" name="" id="inp" />
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:"初始化"
},
methods:{
over:function(){
this.msg = "鼠标进来了"
},
out:function(){
this.msg = "鼠标出去了";
},
keydown:function(){
this.msg = document.getElementById("inp").value;
}
}
})
</script>6.v-model 双向数据绑定
很强大的功能，双向数据绑定，据说阿格拉出来的时候就是这个功能特震撼
<div id="app" >
<h2>文本框数据双向绑定</h2>
<p>您输入的信息是：{{message}}</p>
<input type="text" v-model="message" />
<hr>
<hr>
<ul>
<li>.lazy：取代 imput 监听 change 事件。</li>
<li>.number：输入字符串转为数字。</li>
<li>.trim：输入去掉首尾空格。</li>
</ul>
<hr>
<h2>v-model绑定文本框</h2>
<textarea name="" id="" v-model.lazy="area" cols="30" rows="10"></textarea>
<p>您输入的信息是：{{area}}</p>
<h2>v-model绑定多选框选定一个值</h2>
<input type="checkbox" name="" v-model="isMan" id="isTrue">
<label for="isTrue">男</label>
<p>您选择的信息是：{{isMan}}</p>
<h2>v-model绑定多选框选定多个值</h2>
<input type="checkbox" name="" v-model="names" value="张三" id="zhangsan">
<label for="zhangsan">张三</label>
<input type="checkbox" name="" v-model="names" value="李四" id="lisi">
<label for="lisi">李四</label>
<input type="checkbox" name="" v-model="names" value="王五" id="wangwu">
<label for="wangwu">王五</label>
<p>您选择的信息是：{{names}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"",
area:"",
isMan:true,
names:[]
}
})
</script>对于选择一个的多选框来说，选中的时候 checkbox 绑定的 值就是 ture，没选中就是 false，
对于多选框绑定 同一个 数组来说，选择的就会以数组的形式存如 绑定的数组中，
以上代码可以自己试试。
7.v-bind
v-bind 简写就是 :bind
v-bind 可以用来绑定很多东西，比如说：
- a标签的href ==> <a :href="href">绑定href</a><br>
- src标签的 src ==> <img v-bind:src="imgSrc" alt="">
- 标签的样式
- class
<div id="app" >
<h2>绑定src</h2>
<img v-bind:src="imgSrc" alt="">
<hr>
<h2>v-bind缩写</h2>
<a :href="href">绑定href</a><br>
<a v-bind:href="href">绑定href</a><br>
<hr>
<h2>绑定css样式</h2>
<p>直接绑定css</p>
<div :class="classA" >直接绑定</div>
<hr>
<p>判断绑定 :class="{classA:isOk}"</p>
<div :class="{classA:isOk}" >直接绑定</div>
<hr>
<p>判断多个class :class="[classA,classB]"</p>
<div :class="[classA,classB]" >直接绑定</div>
<hr>
<p>绑定 style</p>
<div :style="objectStyle" >直接绑定</div>
<hr>
</div>
<style>
.classA{
color: #f00;
font-size: 20px;
margin: 10px;
border: 1px solid #000;
}
.classB{
border-radius: 20px;
padding: 20px;
background: #f0f;
}
</style>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:"https://jspang.com/static//myimg/blogtouxiang.jpg",
href:"http://chenparty.com",
classA:"classA",
classB:"classB",
isOk:true,
objectStyle:{
fontSize:"20px;",
color:"#00f",
background:"#000"
}
}
})
</script>8.v-pre & v-cloak & v-once
v-pre : pre原样输出，不渲染
v-cloak在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
v-once指令,在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div id="app" >
<h1>pre原样输出，不渲染</h1>
<p>渲染输出：{{message}}</p>
<p v-pre >加了 v-pre 之后原样输出：{{message}}</p>
<hr>
<h1>v-cloak在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，</h1>
<pre>
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
</pre>
<hr>
<h1>v-once指令,在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。</h1>
<p v-once >{{message}}</p>
<input type="text" v-model="message" >
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'你好'
}
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
