初始 vue

1、js，jQuery编程范式：命令式编程

　vue编程范式：声明式编程

　v-for   遍历数组内容

　v-on: click   监听点击事件，语法糖 @click

• el：

　　类型：string | HTMLElement

　　作用：决定之后 Vue 实例会管理哪一个 DOM。

• data：

　　类型：Object | Function（组件当中data必须是一个函数）

　　作用：Vue实例对应的数据对象

• methods

　　类型：{ [ key : string ]:Function }

　　作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

　　　<div id="app">
      <h2>当前数量：{{ val }}</h2>
      <ul>
        <li v-for="val in project">{{ val }}</li>
      </ul>
      <button v-on:click="add">+</button>
      <button @click="down">-</button>
    </div>
    <script>
      const app = new Vue({
        el: "div",  // 用于挂载要管理的元素
        data: {     // 定义数据
          val: 0,
          project: ["数学", "语文", "英语"]
        },
        methods: {  //定义方法
          add: function() {
            this.val++;
            console.log("add被点击了");
          },
          down: function() {
            this.val--;
            console.log("down被点击了");
          }
        }
      });
    </script>

2、vue中的MVVM：

3、开发中什么时候称为函数，什么时候称为方法？

　　函数：function

　　　直接在script 标签中定义的 function fn(){}

　　方法：method

　　　在类里面的东西一般叫方法，方法一般是和实例对象挂钩的

4、Vue 的指令（主要作用：将值插入到模板内容中）

　1.mustache语法（双大括号{{ }}）

<h2>{{message}}</h2>
<h2>{{message}}，自定义内容</h2>
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>{{firstName+ lastName}}</h2>  // 连接两个变量
<h2>{{firstName+ ' ' + lastName}}</h2> // 连接两个变量，中间加空格
<h2>{{firstName}} {{lastName}}</h2> //连接两个变量，中间含空格
<h2>{{num * 2}}</h2>  //计算变量
<h2>{{message}}</h2>

　2. v-once：阻止界面内容随意更改

　　该指令后面不需要跟任何表达式

　　该指令表示元素和组件只渲染一次，不会随数据的改变而改变。

<h2>{{mes}}</div>
<h2 v-once>{{mes}}</div>  //consolle控制台中更改mes的值，加了v-once中的内容不会被更改　　

　3. v-html：解决从服务器请求的数据本身是 HTML 代码的问题

　　该指令后面往往会跟上一个 string 类型

　　会将 string 的html 解析出来并进行渲染

1.如果直接通过{{}}来输出，会将HTML代码一起输入
<h2>{{url}}</h2> // <a href='http://www.baidu.com'>百度链接</a>

2.如果想按照HTML格式进行解析，并且显示对应内容 则在标签中加入 v-html 指令
<h2 v-html='url'>{{url}}</h2>  // 百度链接

url: "<a href='http://www.baidu.com'>百度链接</a>",

　4.v-text：和{{ }}（Mustache）相似，都是用于将数据显示在界面中

　　v-text通常情况下，接受一个string类型，不灵活，会覆盖原有的值，不建议使用

<h2>{{message}},自定义值...</h2>  // 新插入数值，自定义值...
<h2  v-text='message'>自定义值...</h2>  // 新插入数值（会覆盖原有的值）
message:'新插入数值'

　5. v-pre：用于显示原本的 Mustache 语法(类似于html标签pre)

<h2>{{message}}</h2>  // andy
<h2 v-pre>{{message}}</h2>  //{{message}}
message:'andy'

　6.v-cloak：浏览器会直接显示出未编译的Mustache标签，（类似于斗篷）。

　　在data 数据没解析之前显示出来，data数据解析之后删除掉

<style>
    div{
        display:none;
    }
</style>
<div id="app">{{message}}</div>  //如果函数加载慢，页面中直接显示{{message}}，用户体验不太好，可以使用v-cloak属性设置，没加载出来时显示v-cloak属性，函数加载出来后删除v-cloak属性。
<script>
    const  app = new Vue({
        el:'#app',
        data:{
            message:'自定义...'
        }
    });
</script>

5、V-bind 介绍（动态绑定属性）

• 动态绑定 a 元素的 href 属性
• 动态绑定 img 元素的 src 属性

　1. v-bind 指令

　　作用：动态绑定属性

　　缩写： ：

　　预期： any(with argument)  | Object(without  argument)

　　参数：attrOrProP（optional)

<a  v-bind:href='aHref'>百度</a>
语法糖写法：
<img  :src='imgURL' />

aHref:'http://www.baidu.com',
imgURL:'../img/03.png'

　2. v-bind 动态绑定class值(两种方式：对象语法 和 数组语法)

　方式一：（对象语法：class后面跟一个对象）

　语法：

用法一：直接通过{}绑定一个类
<h2  :class='{active:isActive}'>Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2  :class='{'active':isActive,'line':isLine}'>Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive 和 isLine都为true，那么会有title/active/line三个类
<h2  class='title'  :class='{active:isActive,'line':isLine}'>Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed(计算属性)中
method方法：
<h2  class='title'  :class='{active:"getClass()"}'>Hello World</h2>
getClass:function(){
　　return {active:this.isActive,line:this.isLine};
}

总结：
<h2  class='tit'  :class='{key1:value1,key2:value2}'>{{message}}</h2>  //固定的class 写法：class='',有可能删除的class写法：v-bind:class=''
key：类名
value：boolean值    true，显示  false 不显示

点击按钮实现给字体设置或取消颜色

<syle>
.red {
    color: red;
 }
</style>

<h2 id='app' v-bind:class="{red:flag}">当前数量：{{ val }}</h2>
<button v-on:click="color">设置h2字体颜色</button>

<script>
const app = new Vue({
   el: "#app",
   data: {   　// 定义数据     flag: false
   },
   methods:{
     color() {
        this.flag = !this.flag;
     }
   }
});
</script>

　方式二：数组语法：class后面跟的是数组

用法一：直接通过{}绑定一个类
<h2  :class='["active"]'>Hello World</h2>

用法二：也可以传入多个值
<h2  :class='["active","line"]'>Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2  class='title'  :class='["active","line"]'>Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed(计算属性)中
method方法：
<h2  class='title'  :class='{active:"getClass()"}'>Hello World</h2>
getClass:function(){
　　return [this.active,this.line];
}

总结：
   []中属性加引号("")：代表是字符串  // class类名
   []中属性不加 引号("")：代表是变量