vue-总结1-mustache-属性，样式，事件

Vue01总结

前端MVC是从后端MVC演变过来的，虽然都叫MVC但是两者概念不同。

前端引入MVC的目的

• 为了项目的更新和维护
• 减轻视图的压力
• 为了更好的解决从服务器获取数据的困难
• 为了更好的解决用户在视图中输入的数据如何更好的与后台进行交互

Vue是MVVM架构的框架（js框架帮助开发者写js逻辑代码），
Vue是单项数据流，在数据流动时（数据双向流动）。

2014年07月 vue1.0 出现
2016年09月 vue2.0 发布

Vue的使用

• 直接通过script标签对引入
• 还可以通过npm安装使用

当我们通过script标签引入Vue.js后，我们会得到一个全局变量Vue（构造函数），将它实例化，使用它下面的方法。
如何定义的全局变量

• 在函数外定义
• 函数内没写var
• 直接挂在window身上（vue）

new Vue(options) options称为配置，配置的属性和方法

<div id="app">

<!--这里（id为app元素的内部）是vm的作用范围-->
<!--数据展示-->
<!--我们想要在html里写js，就需要模板语法：vue提供了 mustache :｛｛｝｝-->

<p> {{ this.$date.info }} </p>
<p> {{ this._date.info }} </p>
<p> {{ this.info }} </p>
<p> {{ info }} </p>

</div>

let vm = new Vue({
	el:'#app'		// 挂载  element简写，它的作用是选取一个已有DOM 作为Vue实例的作用范围
	
	data:{			//数据
		info:'holle'//data（data.info）里的数据，在#app模板里，相当于全局变量
		}
})

mustache语法

• 语法支持度

   - 研究它对js语法、数据类型的支持度（支持js所有的数据类型）
   - 语法
   	 支持三目运算符
   	 && ||   一般使用这个 
   - 数据类型
   	 支持js所有数据类型
  

• 写法

   -内容：写内容的时候要加｛｛｝｝
   -属性：属性不加｛｛｝｝
   	1.依靠指令，使用属性。（指令：是用来操作dom的，是封装的函数，
   	这个函数绑定在元素身上，就获取了元素，就能操作这个元素了。）相当
   	于用函数给这个dom添加了一个属性，为了给它加上vue标识，所以使用v-
  

指令展示

• 目的是为了操作DOM

let vm = new Vue({
	el:'#app'		// 挂载  element简写，它的作用是选取一个已有DOM 作为Vue实例的作用范围
	
	data:{			//数据
		info:'holle',  //data（data.info）里的数据，在#app模板里，相当于全局变量		
		xml:'<span>xml数据</span>'，
		type:'A'
		img:'https://p0.meituan.net/128.180/movie/845dce25ba800e91ac591b683a0c3ba92450317.jpg'
		}
})

<!-- v-html 能解析xml数据 -->
<p v-html='xml'></p>


<!-- v-text 下面两者展现结果一样，区别是刷新时，用｛｛｝｝的会短暂的出现｛｛info｝｝-->
<p v-html='info'></p>
<p> {{ info }} </p>


<!-- v-if v-else-if v-else 传进来type的值 为A时  1显示（创建） 
为B时  2显示  其他情况 3显示  创建的是标签
-->

<p v-if='type === "A"'> 1 </p>
<p v-else-if='type === "B"'> 2 </p>
<p v-else> 3 </p>

<!-- v-show flag为布尔值 为true的时候 显示  这个指令改变的是标签 
display属性的值是否为none    跟 v-if效果类似，但是有所区别-->
<p v-show='flag'> 3 </p>


<!-- v-for -->
<!-- 下列会将info 里的内容  一个一个渲染出来 对象，数组，都可以渲染-->
<ul>
	<li v-for='value in info'>{{ value }}</li>
</ul>


<!-- v-bind -->
<!-- 下列例子  第1个为 正常标签里写src属性  第2个为 使用vue写src属性  第3个为简写 -->
<img src="https://p0.meituan.net/128.180/movie/845dce25ba800e91ac591b683a0c3ba92450317.jpg" alt="">
<img v-bind:src="img" alt="">
<img :src="img" alt="">

<!-- v-model 双向数据绑定-->
<input type="'text'" v-model='info'>


<!-- v-pre -->
<span v-pre>{{ this will not be compiled }}</span>


<!-- v-once -->
详细：
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容
并跳过。这可以用于优化更新性能。


<!-- v-cloak -->
用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] 
{ display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签
直到实例准备完毕。

class的绑定

<!-- 
:class是基于 v-bind的简写等同于 v-bind:class=｛｝（相当于传参，
可以传对象｛｝，也可以传数组[]）
{}:传对象｛相当于直接给它加类名，但是后面可以跟一个变量，控制加或者不加，可以
是写在data里的变量｝
[]:传数组[加眼号:'size','bg'会被解析,不加眼号会出问题，除非在data里定义属性，
使用data里的属性来控制]
 -->
<div id="app">
        <p class="size bg"></p>
        <h3>vue class对象的形式</h3>
        <p :class='{size:true,bg:flag}'></p>
        <h3>vue class数组的形式</h3>
        <p :class='["size","bg"]'></p>
        <p :class='[size,bg]'></p>
        <p :class='[size,flag && bg || "bg1"]'></p>
    </div>

 let mv = new Vue({

        el: '#app',

        data: {
            flag: true,

            size: 'size',

            bg: 'bg'
        }
    })

样式的绑定

<!-- 
可以传数组或对象，:style='{}'/'[]'直接在里面写样式，就像直接写了一个style
属性在面写样式一样
数组的另一种方式
:style=[bg,size](数组里面的东西是定义在data里面的变量)

 -->
  <div id="app">
        <h3>样式绑定-对象</h3>
        <p :style='{
            width: "100px",
            height: "100px",
            background: "red"
        }'></p>
        <p :style='flag && style'></p>

        <h3>样式绑定-数组</h3>
        <p :style='[{width:"100px",height:"100px"},{background:"yellow"}]'></p>
        <p :style=[bg,size]></p>
    </div>

 let mv = new Vue({

        el: '#app',

        data: {
            flag: true,

            style: {
                width: "100px",
                height: "100px",
                background: "blue"
            },
            bg: {
                background: 'black'
            },
            size: {
                width: '100px',
                height: '100px'
            }
        }
    })

vue-事件

<!-- 
给dom添加事件  dom标签里写  v-on:事件类型='事件处理函数' 如:v-on:click='fn'
v-on可以简写成@
不传参的函数  不用写（）
 -->
 <div id="app">
        <button v-on:click='plus'>+</button>
        <i>{{ a }}</i>
        <button @click='redux'>-</button>
        <hr>
        <button @click='argHandler(a,b)'>参数</button>
        <input type="number" v-model='b'><br>
        <input type="number" v-model='c'>
        <h4>事件对象</h4>
        <button @click.right.prevent='ehandler($event,10)'>事件对象</button>
    </div>

 let vm = new Vue({
        el: '#app',

        data: {
            a: 1,
            name: 'sgfd',
            b: 0,
            c: 0
        },

        methods: {
            plus() {
                // alert(this)
                console.log(this)
                this.$data.a++
                // this.a++
            },
            redux() {
                this.a--
            },
            argHandler(a, b) {
                alert(+a + +b)
            },
            ehandler(e, num) {
                // alert(1)
                console.log('e', e)
                console.log('num', num)
            }
        }
    })