php软件开发--vue基础

vue介绍：

MVC 中的最大缺点就是单项输入输出，所有的 M 的变化及 V 层的变化，必须通过 C 层调用才能展示；
MVVM 的设计思想，简单理解就是实想数据层与展示层的相互调用，降低业务层面的交互逻辑
构建用户界面的渐进式框架
使用：CDN引用、直接下载引用

Vue 实例对象：

var vm = new Vue({el:'#div',  // 设置要操作的元素data:{ // 要替换的额数据、函数user_name:'我是一个div'fun:()=>{return 2}},methods: {cli: function () {alert('123');}}
})
// 打印Vue实例对象
console.log(app);

模板语法-插值:

文本:{{ msg }}
使用 JavaScript 表达式：{{ un > 3 ? '大' : '小'}}、{{ fun() }}

模板语法-指令：

v-if、v-for、v-text、v-html、
v-bind 属性绑定：<img id=“app” v-bind:src="src" :alt="'这是图片'+msg" /><div id="app" v-bind:class="{active: isActive}"></div><div id="app" class="active text-danger"></div><div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}"><div id="app" v-bind:style="[color, fontSize]">abc</div>v-model 双向数据绑定：<input type="text" :value="input_val"><textarea v-model="inp_val"></textarea><div>{{ inp_val }}</div>
修饰符：.lazy：取代input监听change事件.number：输入字符串转为有效的数字.trim：输入首尾空格过滤<input type="text" v-model.lazy="input_val">
v-on 绑定事件监听：<input type="button" value="按钮" v-on:click="cli"><input type="button" value="按钮" @click="cli(1,3,@event)"><input type="text"  @keyup.enter="keyup"><input type="button" value="按钮" @click.shift="cli"><input type="button" value="按钮" @click.middle="cli">
v-show 显示隐藏:
v-if / v-else / v-else-if 条件判断:
v-for 循环：<li v-for="(val,key) in arr">{{val}}---{{key}}</li>
v-cloak：和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once：只渲染元素和组件一次