发表于： 2019-12-04 22:41:53

1 1082

今天完成的事情：

1.学习vue官方文档内容

明天计划的事情：

1.学习vue，并推进任务。

遇到的问题和收获：

1.了解了一些vue的语法。并自己写了下

·插值

v-once，执行一次性插值，当数据改变时，插值处的内容不会更新。

<div id="app-4" v-once>
        <p>
            {{ a }}
        </p>
</div>

<script>
  var vm = new Vue({
        el: '#app-4',
        data: { a: 1 },
      });
vm.a=2;

此处a依然为1

·原始HTML

注意，“Mustache”语法 (双大括号) 的文本插值，双大括号会将数据解释为普通文本字符串，并不是HTML代码，

<div id="app-4" v-once>
    <p v-html="a">{{a}}</p>
    <p>{{a}}</p>
</div>

<script>
  var vm = new Vue({
        el: '#app-4',
        data: {
            a: "<span style='color:red'>一组字符</span>"
        },
      });

即我需要在此处不显示span标签，所以需要用v-html输出真正的html。

·特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

v-bind:标签具有的属性="某一个变量的值"

v-bind:id=""

v-bind:class=""

dom上会绑定一个动态的样式已经出现一个class=red

再加上一个css样式即可

如果改变变量的值，则属性进行了一个动态的变化

·使用javascript表达式

三元表达式，Ok？是变量或条件运算的结果，布尔类型，true false

，

·条件渲染

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Vue is yes!</h1>

var vm = new Vue({
    el: '#app-4',
    data: {
     awesome:true
    },

awesome为true，则v-if的标签显示，为false时，则显示v-else的标签。

v-else-if

可以充当v-if的else-if块。

<div v-if="deBuff==='a'">我是大傻逼</div>
<div v-else-if="deBuff==='b'">我也是大傻逼</div>
<div v-else-if="deBuff==='c'">我依然是大傻逼</div>
<div v-else>我不是大傻逼</div>

var vm = new Vue({
    el: '#app-4',
    data: {
        deBuff: 'a'
    },

，根据变量值而变化。改为b则文字变为我也是大傻逼

v-show

<div v-show="ok">一朝笑尽天下事</div>

 var vm = new Vue({
     el: '#app-4',
     data: {
         ok:false
     },

是隐藏的，不过此时dom中的元素还在，v-show只是切换了display的属性。

和v-if的区别

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show，不管初始条件是什么，元素都会被渲染，并只是简单的进行css切换。如果需要频繁的切换，那还是使用v-show比较好。

v-for

可以用它基于一个数组来渲染一个列表。需要使用item in items形式的特殊语法，items是数组，item是被迭代的数组元素的别名。

<div v-for="item in items">
{{item.message}}
</div>

var vm = new Vue({
    el: '#app-4',
    data: {
        items:[
            {message:"this"},
            {message:"is"},
            {message:"jojo"}
        ]
    },