使用Vue:导入=>创建vue对象=>挂载到指定页面标签
<script src='js/vue.js"></script>
一个vue对象,控制着一个挂载点
<script>var vue = new Vue({el:'.class','#id'})</script>
如果控制整个页面,将整个页面用一个整体标签包裹,挂载着一个vue对象(不用用body)
只能控制检索到的第一个class为wrapper的页面结构
注:挂载点(html页面结构)与vue对象一一对应,规范挂载点使用id来标识
一个被vue对象控制的页面结构就称之为一个组件
组件与控制该组件的vue对象(vue实例)是一一绑定关系(可以看做同一个)
<div id="app">{
{msg}}{ {info}}</div><script> var vue = new Vue({ el:'#app',data:{ msg:'123',info:'tbhrtyh'}});</script>
vue对象:与页面挂载点建立联系:el,控制挂载点中的数据:data,控制挂载点中的事件:methods(...)
取变量中的值:vue.$data.msg 或 vue.msg
差值表达式:用{
{}}包裹vue的变量,该变量需要在vue对象中初始化vue指令:就是在标签的全局属性,但是这些属性是以'v-'开头
v-text:文本,变量值为文本内容
v-html:文本,变量值为文本内容
v-once:需要渲染数据,且不可改变
事件指令:v-on:事件名 简写@事件名
v-on"事件绑定的变量名" :事件名:来设置事件触发的条件
整体语法:v-on:事件名='事件绑定的变量名'
时间绑定的变量名 有methods来提供具体的方法实现
methods:{ action:function(){ alert('sb')}}
属性指令:v-bind:属性名 简写 :属性名
v-bind="属性绑定的变量名"
:属性名 (style | class | 自定义属性)
整体语法: v-bind:属性名="属性绑定的变量名"
属性绑定的变量名 由 data来提供具体的方法实现
表单指令: v-model
文本指令不需要绑定东西:v-text="变量名"
属性指令需要绑定属性: v-bind:属性名="变量名" ==> :属性名='变量名'
事件指令需要绑定事件:v-on:事件名="变量名" ===> @事件名="变量名"
表单指令需要绑定表单元素的value: v-model:value='变量名' ===> 只对value进行绑定,
所以直接书写为 v-model="变量名"
有v-once的标签，内容一段渲染，就不能再改变
v-model针对于表单元素
1.双向绑定:服务于文本输入框 v-model存储的值为输入框的value值
单选框:
单选框是以name进行分组,同组中只能发生单选 v-model存储的值为单选框的value值
单一复选框 v-model存储的值为true|false 或者为自定义替换的值
<div>
<input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" /> { { sin_val }} </div>多复选框
v-model存储的值为存储值多复选框value的数组
默认值可以决定单选框默认选项
默认值为true,单一复选框为选中
数组中存在的值对应的复选框默认为选中状态
插值表达式符号:
更改样式当书写格式冲突时
delimiters:['供热个人','grtegeh'']
computed:一个属性变量的值依赖于多个属性变量的值
特殊点:data绑定的属性值是固定的 computed绑定的属性值是动态的(函数的返回值)
computed:{
fullname:function(){
alter('123')
return qwe} 当值变化时触发
watch为fullname绑定了一个监听事件
fullname的定义还是在data或computed中
fullname的属性值一旦改变,绑定的监听事件触发
<input type="text" v-model="fullName">
条件指令: v-if v-show
v-if在消失的时候,不会被渲染,而v-show以display:none;进行渲染
时间绑定函数可以加()
一旦加()就代表要传入参数,系统就不在传入事件参数
如果想要传入事件参数,1:不加括号,2.加括号需用$event
循环指令:v-for="obj in objs"
遍历数组: <p v-for="cless inlist">
遍历对象(字典) <p v-for="(value,key,index) in dic ">
数组unshift(txt)添加在开始位置 splice(index,1)删除指定位置元素