本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.Vue基础-el挂载点

{{}}双括号写div里的id可以被识别

v-text指令的作用设置元素的文本值简写为{{}}

编辑

2.Vue基础-data数据对象

编辑

3.v-text指令

编辑

4.v-html指令

编辑

html解析成标签,text解析成内容

5.v-on指令

v-on和@形式一样

v-on:

v-on指令的作用是:为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

小节:

创建Vue示例时:el(挂载点),data(数据),methods(方法)

v-on指令的作用是绑定事件,简写为@

方法中通过this关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为{{}}

v-thml指令的作用是:设置元素的innerHtml

6.v-show指令

v-show

v-show指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为true元素显示,值为false元素隐藏

7.v-if指令

v-if

v-if指令的作用是:会根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false从dom树中移除

频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-show和v-if的区别和联系

定义:

v-show严格意义上说“条件隐藏”。浏览器首先把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。除了初始化渲染，其他时候都不会再走相关生命周期了。
v-if是真正意义上的“条件渲染”。浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM。每次切换一次会重新走一次生命周期

性能方面:

v-show性能更高,因为v-show只能动态的改变样式，不需要增删DOM元素。如果项目很大，推荐多用v-show

语法:

v-show不支持template语法

8.v-bind指令

v-bind指令的作用是:为元素绑定属性

编辑

可以简写为:

编辑

demo

总结:v-bind

v-bind指令的作用是:为元素绑定属性完整写法是v-bind:属性名简写的话可以直接省略v-bind,只保留:属性名需要动态的增删class建议使用对象的方式

9.应用实例-图片切换

注:这里可以用v-show代替v-if使用,但是不建议使用,v-if多配合v-else使用

图片切换:列表数据使用数组保存 v-bind指令可以设置元素属性,比如src v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

10.v-for指令

methods方法

1.我们可以使用 methods 属性给 Vue 定义方法，methods 的基本语法：

var vm = new Vue({
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}
});

2.在 methods 方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问。

<script>
  new Vue({
    el: '#app',
    data(){
      return{
        number: 1000
      }
    },
    methods:{
      show: function(){
        console.log(this.number);
      }
    }
  });
</script>

如果是在 Vue 构造函数外部，可以使用 vm.方法名 定义或调用方法，还可以通过 vm.$data.属性名 来访问 data 中的数据。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
    <h1>点击按钮修改名字</h1>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">点我改名</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return{
                    message: "李四"
                }
            },
            methods:{
                change(){
                    this.message = "张三"  // 改变data中属性的值
                }
            }
        })
    </script>
</body>
</html>