vue的基本使用

1.下载

cdn方式下载

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引包

<script src="./vue.js"></script>

2.实例化Vue对象

new Vue({ //基本数据
    el:'#content', // 绑定选择器
    data(){   // 绑定数据属性,建议以函数的方式声明,返回一个对象,在后面的创建组件必须以函数方式定义
    	return {
            name:'will',
            age:18
        }
	},
    watch:{  // 监听数据
        xxx:function(val){
            
        }
    },
    methods:{ //绑定的相关方法
        xxx(){}
    },
    computed:{  //计算相关数据,并返回
        xxx:function(val){ 
            return xxx
        }
    },
    created(){ // 组件创建时运行的方法
        
    },

})

Vue的模板语法

可以插入任何你想插入的内容，除了if-else if-else用三元运算符代替

<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'will'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>

Vue的指令系统之v-text和v-html

v-text相当于innerText
v-html相当于innerHTML

v-if和v-show的区别

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind 和v-on

v-bind可以绑定标签中任何属性  
v-on 可以监听 js中所有事件

简写：
v-bind:src  等价于   :src
v-on:click 等价于 @click

v-for 遍历列表

v-for可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

watch

watch可以监听单个属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="content">
        <p>{{ msg }}</p>
        <button @click = 'clickHandler'>修改</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:"what is the life",
                    age:18
                }

            },
            methods:{
                clickHandler(){
                    this.msg = "hello world"
                }
            },
            watch:{
                //watch单个属性，如果想监听多个属性 声明多个属性的监听
                'msg':function (value) {

                    if (value === 'hello world'){
                       this.msg = 'dashabi'
                    }
                },
                'age' :function (value) {
                    
                }
            }
        })
    </script>
</body>
</html>

computed

监听多个属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="content">
        <p>{{ msg }}</p>
        <button @click = 'clickHandler'>修改</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:"what is the life",
                    age:18
                }

            },
            methods:{
                clickHandler(){
                    this.msg = "hello world"
                }
            },
            computed: {
            myMsg: function () {
                //业务逻辑

//                    计算属性默认只有getter方法
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
        })
    </script>
</body>
</html>