vue的基础语法
vue的基础语法
- js语句
- 插值的基本语法
- 指令的基本语法
- 什么是指令？？
js语句
在写vue语法前我们要使用一个js语句
分为在线和离线
在线
<script src="https://cdn.bootcdn.cet/ajax/libs/vue/2.6.1/vue.js"></script>
离线
<script src="js/vue.js"></script>
插值的基本语法
- 文本
{{msg}} - html
使用v-html指令用于输出html代码 - 属性
HTML属性中的值应使用v-bind指令 - 表达式
Vue提供了完全的JavaScript表达式支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.cet/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<!-- 1 插值 -->
<div id="app">
<ul>
{{msg}}
<li>1.1 文本<p>title={{title}},ts={{ts}}</p></li><br />
使用v-html指令用于输出html代码 <br />
<li>1.2 html</li>
<div v-html="html"></div><br />
HTML属性中的值应使用v-bind指令<br />
<li>1.3 属性</li>
<div>
<a v-bind:href="href">百度</a>
<input type="button" value="点啊" v-on:click="onClick"/>
</div><br />
Vue提供了完全的JavaScript表达式支持<br />
<li>1.4 表达式</li>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</ul>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:function(){
return{
title:"kele qixi",
ts:new Date().getTime(),
html:'',
href:'https://www.baidu.com',
str:'kele qixi',
number:10,
ok:false,
id:22
}
},
});
</script>
</html>
最后实现的效果图
指令的基本语法
什么是指令？？
指的是带有“v-”前缀的特殊属性
- 核心指令
1、v-if|v-else|v-else-if
根据其后表达式的bool值进行判断是否渲染该元素 他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
2、v-show
与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”
3、v-for
类似JS的遍历，
遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
4、v-bind
5、v-on
6、v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 v-for/v-model一起绑定[多选]复选框和单选框 - 参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示 - 动态参数
从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写 - 修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 - 简写
Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
注：监听属性 var 与 let
var 作用于整个vm 全局变量定义
let 作用于最近的一对{} 局部变量定义
常用let来声明对象，避免用var 全局变量导致数据污染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="https://cdn.bootcdn.cet/ajax/libs/vue/2.6.1/vue.js"></script> -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 1 插值 -->
<div id="app">
<ul>
<li>一、v-if|v-else|v-else-if</li>
<div v-if="sex=='boy'">
可乐
</div>
<div v-else-if="sex=='girl'">
七汐
</div>
<div v-else>
年
</div>
<li>二、v-show</li>
<input type="checkbox" v-model="show" />隐藏/显示
<div v-show="show">
七汐可乐
</div>
<li>三、v-for</li>
<div v-for="st in student">
{{st.name}}
</div>
<!-- <li>四、v-for/v-model</li>
<div v-for="st in student">
<input type="checkbox" value="ids" />{{st.name}}
</div>
ids={{ids}} -->
<li>监听属性</li>
KB:<input type="text" name="kb" v-model="kb" /><br />
MB:<input type="text" name="mb" v-model="mb"/>
<div>
var 作用于整个vm 全局变量定义
let 作用于最近的一对{} 局部变量定义
常用let来声明对象，避免用var 全局变量导致数据污染
</div>
<!-- <li>五、v-on</li>
<li>六、v-model</li> -->
</ul>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:function(){
return{
title:"kele qixi",
ts:new Date().getTime(),
sex:'boy',
show:false,
student:[
{'id':'1','name':'kele','score':39},
{'id':'2','name':'qixi','score':459},
{'id':'3','name':'xuebi','score':49},
{'id':'4','name':'jici','score':379},
{'id':'5','name':'yl','score':59},
],
ids:[],
kb:1024,
mb:1
}
},
methods:{
},
watch:{
kb:function(k){
this.mb=k/1024;
},
mb:function(m){
this.kb=m*1024;
}
}
});
</script>
</html>
最后实现的效果图
总结：如果疑问或者我写的不太对的地方，欢迎评论区逛街！！！！！！
