Vue简单介绍和操作指南

Vue解决的问题是:逻辑部分和赋值部分进行分离

Vue分为:
视图部分:负责页面渲染，主要由HTML+CSS构成。
脚本部分:：负责业务数据模型（Model）以及数据的处理逻辑。

 

let vm = new Vue({
 选项列表;
});
选项列表
el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。
数据绑定
在视图部分获取脚本部分的数据。
{{变量名}}

 

常用指令:
v-html:把文本解析为html代码  <div v-html="msg"></div>
v-bind:为html标签绑定属性值(可省略) <a  :href="href">百度一下</a><br/>
v-if
v-else    条件性渲染某元素,判定为true时渲染<div v-if="num%3==0">div1</div>
v-else-if
v-show:根据条件展示某元素,区别在于切换的是display属性的值<div v-show="flag">div4</div>
v-for:列表渲染,遍历容器的元素或者对象的属性 <li v-for="name in names">{{name}}</li>
v-on:为html标签绑定事件   v-on:click/dblclick="change()"  或者@click/dblclick="change()"
v-model:在表单元素上创建双向数据绑定

 

style="float"右侧显示

 

Eelement前提必须有Vue
<script src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">

 

自定义组件
Vue.component("my-button",{
    //属性
    props:["style"],
    //数据函数
    data:function(){
        return{
            msg:"我的按钮"
        }
    },
    //解析标签模板
    template:"<button style='color:red'>{{msg}}</button>"
});

 

Vue异步操作
引入axios核心js文件
get("请求资源路径?请求参数")
post("请求资源路径","请求参数")
then(response)请求成功时,通过response获取响应的数据
catch(error)请求失败后,通过error获取错误信息
axios.post("GetServlet","name="+this.name)
                   .then(resp=>{
                       alert(resp.data);
                   })
                   .catch(error=>{
                       alert(error);
                   })

                   
                   
vue对象的生命周期方法，在vm对象创建完成以后，执行这个方法
created:function(){}        

ctrl+n查询源码ctrl+f查询所有类型