vue 基础学习一

学习vue中发现的问题，和解析(自问自答)

var vm=new vue({

             el:"#app",

             data:{

                  msg:"我是一段厉害的代码",

                  class1:"bigBlue",

                  change:false,

                  style1:{ color:"red",font-size:"15px" },

                  list:[1,2,3,4,5,6,7,8,9],

                 object1:[

                              {   name:"王强"，sex:"男" },

                              {   name:"王丽"，sex:"女" },

                               {   name:"王励勤"，sex:"未知" }

                              ]

               },

              methods:{

                }

})

一、引入vue.js,加载时候页面未进行渲染，会出现闪切(由变量变为数据)的效果

1.需要在对应的模块(#app 里面)外部 增加 v-cloak

属性 并且在style区域增加[v-cloak]{ display:none; } 样式;即js加载完成后显示页面数据。

2.使用 v-text="msg" 属性，v-text js加载完成之后才会渲染数据。

注:v-cloak 和 v-text 还是不同的,v-cloak 只是一个属性,在标签区间中,仍然需要添加变量输出的表达式即{{msg}},且{{msg}}前后可以增加不同的数据也可以使用三元运算符，加减法等基础计算等。而v-text=“msg”  类似于input的value属性，即给标签赋值,只是在页面数据加载完成后才会显示和赋值。

二、怎么通过变量来输出html标签并且解析

用v-html="msg" 属性来操作 

三、怎么绑定html 原有属性呢？例如 title属性

用v-bind:title="msg"    v-bind:是vue中提供的绑定属性的一个指令   v-bind:  可以简写为 :

四、怎么绑定事件呢？例如click(点击)事件等

用v-on:click="checkedMe"  v-on:是vue中提供的绑定事件的一个指令  v-on:可以简写为@ 

 且绑定的事件应该写入  methods:{ checkedMe:function(){   alert("你点击了我")  }   };    methods 是实例化vue中绑定所有可用的事件的 实例区域。

五、怎么阻止或监听绑定事件on的时候 触发冒泡等呢？(事件修饰符)

1.   “.stop” 阻止冒泡      @click.stop="checkedMe"

2.   ".prevent"阻止默认事件   <a  href="https://www.baidu.com" @click.prevent="checkedMe">  触发checkedMe且不跳转。

3.   ".capture" 添加事件监听器时使用的事件捕获模式    即从当前元素从外到里捕获所有事件

4.   ".self"  只当事件在该元素本身(比如不是子元素)时触发的触发回调   即只有点击当前元素才会触发事件函数。

5.   ".once" 事件只触发一次    <a  href="https://www.baidu.com" @click.prevent.once="checkedMe">  第一次点击触发checkedMe且不跳转,第二次则 触发checkedMe 且跳转到百度

注:  .once  如果用在事件修饰符前和在事件修饰符后无区别，.stop和.self 都有阻止冒泡的效果，但是self只是阻止当前元素的冒泡,而.stop则是在该元素由内而外阻止冒泡。

六、什么标签可以和用户进行交互，实现双向绑定呢？

表单标签都可以用v-model="msg" 来事件数据的双向绑定。

七、既然可以绑定属性,那可以不可以动态的绑定样式呢？

当然可以v-bind:class="class1"  或  :class="class1"    因为v-bind:  <=> :  

绑定属性都是通过表达式去data中寻找变量，那我怎么直接引用<style></style>中写的样式类呢?

可以用 :class="['smllBlue','bigRed']" ,通过数组的形式传入多个样式，注: 数组中的样式类名称，必须用单引号以字符串的形式写入，要不会按照表达式去解析，寻找变量

 灵活应用，则在动态样式绑定中，可以通过三元表达式，来控制是否添加样式类 [change?"active":""] 即当变量change为true时 绑定样式 active。  也可以通过对象属性是否为真来控制是否添加样式类  [{'active':change}]  即当变量change为true时 绑定样式 active。

八、如何通过内联样式绑定，给我们的数据增加样式呢？

可以用:style="style1"  表达式对象来增加样式，如果多个则用数组形式 :style="[style1,style2,style3]" 

九、vue也支持渲染for循环   循环数组  或者对象数组或对象

<div  v-for="(item,i) in list"> {{i}} {{item}}</div>  将div循环了9次， i  表示各个下标 ， item 表示下标下的值，当然 i和item都是可以按照自己喜欢替换成别的字符   如 <div  v-for="(value,key)  in list"> {{i}} {{item}}</div>  等

v-for  除了可以循环数组外 还可以循环对象数组：

<div  v-for="(value,key) in object1">我是第 {{key}} 个数据   我的名字叫 {{value.name}}   性别是{{value.sex}}</div>

注:  v-for=" ok in object1 "   中的ok  即是数组中的 item  即下标值     在2.2.0+版本中  :key="" 是必须被定义的 且:key="" 只能绑定Number或者 String 类型   如  :key="value.id"     绑定的key值是唯一的