Vue的使用


1.数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!--Vue中有两种绑定方式:
                1.单向数据绑定(v-bind):数据只能从data流出界面
                2.双向数据绑定(v-model):数据不仅能从data流出界面,话可以从页面流向data。
                    Tips:
                        1.双向数据绑定一般应用在表单类元素上(如:input、select等)
                        2.v-model:value 可以简写成 v-model,因为v-model默认收集的就是value值。
                        
        -->
        单向数据绑定:<input type="text" v-bind:value="name"><br>
        <!-- v-model只能应用在表单类元素(输入类元素)-->
        双向数据绑定:<input type="text" v-bind:value="name"><br>
    </div>

</body>

<script>
    Vue.config.productionTip =false //阻止 vue 在启动时生成生产提示。
    
    new Vue(&#123;
        el: '#app',
        data: &#123;
            name: "你好",
        &#125;,
        methods: &#123;

        &#125;
    &#125;);
</script>

</html>

2.el和data的两种写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    
    <!--1.el有2种写法
            a.创建Vue实例对象的时候配置el属性
            b.先创建Vue实例,随后再通过vm. $mount('#root')指定el的值

        2.data有2种写法
            a.对象式: 
                data:&#123;
                    name:''
                &#125;
            b.函数式:
                data:function()&#123; 
                    console.log(this) //此处的this是指Vue实例对象
                    return &#123; 
                        name:''
                &#125; 
            &#125;

        3.如何选择:目前哪种写法都可以,以后到组件时,data 必须使用函数,否刮会报错
    
            一个重要的原则
            由Vue管理的函数,一定不要写箭头函数,
                        data:()=>&#123;

                        &#125; 
            否则this就不再是Vue实例了 -->
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue(&#123;
        el: '#app',//el第一种写法
        data: &#123;&#125;,
        methods: &#123;&#125;
    &#125;);

    vm.$mount('app') //el第二种写法
</script>

</html>

3.MVVM模型

MVVM模型

  • M:模型Model, data 中的数据
  • V:视图View,模板代码
  • VM:视图模型ViewModel,Vue实例

观察发现

  • data中所有的属性,最后都出现在了vm身上
  • vm身上所有的属性及Vue原型身上所有的属性,在Vue模板中都可以直接使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvvm</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  
    <div id="root">
        <h2>名称:&#123;&#123; name &#125;&#125;</h2>
        <h2>战队:&#123;&#123; rank &#125;&#125;</h2>
        <h2>测试:&#123;&#123; $options &#125;&#125;</h2>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue(&#123;
            el: '#root',
            data: &#123; 
                name: 'uzi',
                rank: 'RNG'
            &#125;
        &#125;)
    </script>
</body>
</html>