vue基础语法
vue.js 数据渲染框架,MVVM模型
MVVM模型:
- M:modedl 数据模型,页面中要显示的数据
- V:view 视图,页面中的标签样式等
- VM:将数据加载至页面
让页面中的样式与版面进行分离,从而达到动态页面的效果
模板:
<script src="js/vue.min.js"></script>
<script>
new Vue({
'el': '必须传id值', // 控制范围
data(){ // 作用域中的数据
return { // 传Json
'name':'张三',
'arr':['a','b'],
}
},
computed:{ // 属性计算 传Json 必须有返回值
},
methods:{ // 定义函数 传Json
}
})
</script>
1 - 1 创建vue控制器
-
引入vue.js文件
<script src="js/vue.min.js"></script>
-
创建vue控制器
new Vue("传json")
1 - 2 vue控制器参数
-
el
:控制范围 必须是id选择器 -
data
:作用域中的数据 就是Model 类型function(){} return json(该Json就是该页面的数据模型)
new Vue({ 'el':'#wrap', 'data':function(){ return { 'name':'张三' } } // 简写 /*data(){ return { 'name':'张三' } }*/ })
-
computed
:属性计算,传Json,且Json中的每一个元素都是function,且必须有的return,computed中的所有函数都是对data中的数据进行计算使用的,不能额外传参数<body> <div id="wrap"> 单价:<input type="number" v-model="price" /><br /> 数量:<input type="number" v-model="count" /><br /> 总价:{{sum}}<!-- 注意:此值无法双向绑定 --> </div> <script> new Vue({ 'el':'#wrap', data(){ return { 'count':'1', 'price':'10', } }, computed:{ sum() { return this.count * this.price } } }) </script> </body>
-
methods
:所有函数定义在此,传递的也是Jsonmethods:{ fun() { alert(111111) }, }
1 - 3 属性值绑定
-
绑定属性值(单向绑定)
:属性名="作用域中的key"
<input :value="name" />
-
双向绑定
只能用于表单元素(即用户能输入值的东西)
页面中的值改变,对应key的值也会改变
v-model="作用域中的key"
<input v-model="name" />
-
绑定事件
@时间名="methods中得到方法"
,也可以直接写代码<input type="button" value="点击调用事件" @click="fun()" /> <input type="button" value="点击调用事件" @click="alert('1111')" />
-
绑定class
-
绑定数组
:class="data中的key(value必须是数组的值)"
<style> *{ margin: 0; padding: 0; } .a{ width: 100px; height: 100px; border: 10px solid #000000; } .b{ background: #00FF00; } </style>
<body> <div id="wrap"> <!-- 可以同时实现class为a、b的两个样式 --> <div :class="arr"></div> </div> <script> new Vue({ 'el':'#wrap', data(){ return { 'arr':['a','b'], } }, computed:{ }, methods:{ } }) </script> </body>
-
绑定Json(可以用于动态显示效果)
:class="{key(class值):boolean(有或没有)}"
<style> *{ margin: 0; padding: 0; } .a{ width: 100px; height: 100px; border: 10px solid #000000; } .b{ background: #00FF00; } </style>
<!-- a样式有,当count>10时有b样式 --> <div :class="{a:true,b:count>10}"></div>
<script> new Vue({ 'el':'#wrap', // 控制范围 data(){ // 作用域中的数据 return { // 传Json 'count':'1', 'price':'10', 'arr':['a','b'], } } }) </script>
-
绑定style
:style="{Jquery中.css中怎么写,这就怎么写}"
<div :style="{width:'200px',height:'100px',border:'1px solid #000000'}"></div>
-
条件显示
v—if="表达式"
标签符合条件时才会显示
v-else
标签不满足
v—if
时显示<div v-if="price>5" >单价大于5</div> <!-- 当不满足上面条件时显示 --> <div v-else>单价小于等于5</div>
v-show:"表达式"
是否显示标签(满足表达式的条件就显示)
与
v—if
不同之处在于,v-show
所在的标签,是无论如何都存在的,而v—if
只有在满足条件时存在<div v-show="price>5">单价>5</div>
v-for="(item,index)" in data中的key(必须时数组)
标签循环,index为下标索引,itme为值
<!-- 循环输出数组对应位置的值 --> <div v-for="(itme,index) in arr">{{index}} ----- {{itme}}</div>
-