Vue第一天

使用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)删除指定位置元素