Vue基础

Vue创建

 <div class="root">
        <h1>北京{{name}},{{address}},{{school.toUpperCase()}}</h1>
    </div>
    <div class="root">
        <h1>北京{{name}}</h1> {{xxx}} //中的xxx要写成js表达式，即有返回值
    </div>

    <script>
        Vue.config.productionTip=false  //阻止Vue在启动时生成生产提示（vue.js和vue.min.js）


        const x=new Vue({  //创建vue实例
            el:'.root',   //给vue指定实例
            data:{        //data用于存储数据
                name:'22欢迎你',
                address:'北京',
                school:'peking',
            }
        });
    </script>

Vue模板语法

1插值语法

功能：用于解析标签体的内容

2指令语法

用于解析标签（标签属性，标签体，绑定事件）

数据绑定

1.单项绑定 v-bind:数据只能从data流向页面
2.双向绑定 v-model:数据可以从页面流向data,也可以从data流向页面
双向绑定一般应用在表单元素上

el和data的两种写法

 x.$mount('#root');

var x=  new Vue({
                   el:'#root',
                 data:{
                     name:'欢迎你',
                 }
             });

 new Vue({
            //  el:'#root',
             data(){
                 return{
                    name:'欢迎你',
                 }
                
             }
         });

MVVM模型

• data中所有的属性最后都出现在vm身上。
• vm的所有属性以及Vum原型上的所有属性在Vue模板中都可以直接使用