Vue基本语法

 

前端三大框架:

框架	介绍
vue	尤雨溪,渐进式的JavaScript框架
react	Facebook公司，里面的高阶函数非常多，对初学者不用好
angular	谷歌公司，目前更新到13.0，学习angular得需要typescript

Vue模板语法

<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3> #字符串
<h3>{{ 1+1 }}</h3>  #可运算
<h4>{{ {'name':'alex'} }}</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-show 相当于 style.display

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

<div id="app">
    <ul v-if="data.status === 'ok'">
        <!--v-for的优先级是最高的     diff算法-->
        <li v-for = '(item,index) in data.users' :key="item.id" >
            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
        </li>
    </ul>
    <div v-for = '(value,key) in person'>
        {{ key }}-----{{ value }}
    </div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>

    new Vue({
        el: '#app',
        data() {

            return {
                data: {
                    status: 'ok',
                    users: [
                        {id: 1, name: 'alex', age: 18},
                        {id: 2, name: 'wusir', age: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person:{
                    name:'alex'
                }
            }
        },
        methods: {}

    })
</script>

watch和computed

watch:可以监听单个属性

<script>
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:"eric",
                    age:18
                }

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

                    console.log(value);

                    if (value === 'eric'){
                       alert(1);
                       this.msg = 'hello,eric'
                    }
                },

                'age' :function (value) {
                    
                }
            }
        })
</script>

computed:可以监听多个属性

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: "eric",
                age: 18
            }

        },
        created() {
            //定时器  ajax  库 function(){}
            setInterval(() => {

            })
        },
        methods: {
            clickHandler() {
                //this的指向就是当前对象
                this.msg = "eric";
                this.age = 20;
            },
            clickHandler: function () {
                console.log(this);
            }

        },
        computed: {
            myMsg: function () {
                //业务逻辑

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

    console.log(vm);
</script>

v-model 数据的双向绑定

v-model只能应用在input,textarea,select标签中

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值,将 Vue 实例的数据作为数据来源。

<div id='example-4'>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#example-4',
  data: {
    message: ''
  }
})
</script>

Vue常用属性

 

 

 

Vue常用方法

 

 

 

Vue过滤器

 

 

 

Vue组件