Vue前端框架学习前言

• 当前学习在后端laravel框架中
• 关于相关安装及使用，请参考laravel手册和Vue官网学习
• 指令

v-text ：相当于 {{ message }} 使用一致
<span v-text='v_text'></span>
{{ v_text }}
上面两种等效（并且,内容是不会渲染用户输入的标签）

v-html : 功能和 v-text 基本一致（也是显示文本内容,但是,会渲染用户输入的标签）
<span v-html='v_text'></span>
v-html会渲染v_text里面有标签的内容

v-show ：控制display:none;元素是否显示或隐藏
<span v-show='v_show'>display:none;</span>
v_show布尔类型（true | false）(true:显示span标签内容;false:隐藏span标签内容)

v-if : 条件语句（bool值 true | false）
v-else-if : 条件语句（bool值 true | false）
v-else : 条件语句（bool值 true | false）
<span v-if="Math.random() > 0.5">你好！多这</span>
<div v-if="v_status === 'if'">if</div>
<div v-else-if="v_status === 'elseif'">else if</div>
<div v-else="v_status === 'else'">else</div> 

# v-for：循环语句
# html 数组形式
<div id="app-1">
    <ul>
        <li v-for="(value,index) in arr">
            @{{ index }} - @{{ value.message }}
        </li>
    </ul>
 </div>
# 或
<div id="app-1">
    <ul>
        <li v-for="item in arr">
            @{{ item.message }}
        </li>
    </ul>
 </div>
# js
      var app1 = new Vue({
            el: "#app-1",
            data: {
                arr: [
                    { message: 'ni'},
                    { message: 'hao'}
                ]
            }
        });
//> 对象
//> html
<li v-for="value in obj">
    @{{ value }}
</li>
<li v-for="(value,key) in obj">
    @{{ value }} - @{{ key }}
</li>
<li v-for="(value,key,index) in obj">
    @{{ index }} - @{{ value }} - @{{ key }}
</li>
# value：属性值;key:属性键; index:索引0开始
//> js
var app1 = new Vue({
    el: "#app-1",
    data: {
        obj: {
            start: 'start',
            end: 'end',
            sex: 'sex',
            name: 'name'
        }
    }
});
# 标签输出
<span v-for="n in 5">@{{ n }}</span>
# 输出内容
1 2 3 4 5