十、Vue起步引用和双大括号插值
先进入项目的目录
执行`npm init` 或 `npm init --yes`
执行`npm install vue --save` //下载Vue到当前目录 // 或指定版本`npm install [email protected] --save`
<body> <div id="app"> <h3>{{ msg }}</h3> <h3>{{ msg + '哈哈' }}</h3> <h3>{{ 1>1? 'true':'false' }}</h3> </div> <!--1.引包--> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 2.创建vue实例化对象,构造函数Vue，传参是一个对象 var app = new Vue({ el: '#app',//目的地 //data也是一个对象 // 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。 // 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 // 数据驱动视图 data: { msg: 'Hello Vue!' } }); console.log(app); //在vue实例化对象之后，这个对象中属性前面默认有$符号， // 主要是跟我们自己定义的属性进行区分 // app.$el === document.getElementById('app') 为真 </script> </body>
输出结果：