Vue框架特性
-
Vue的引入
最简单的引入方法:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
该方法需要保持网络连接,无法在无网络环境下使用 -
Vue的使用
需要声明一个Vue的实例<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ }) </script>
⚠️注意: 接下来除了html标签之外的代码都在第二对<script>标签里的new Vue({})中编写
-
Vue的特性
一、 响应式数据,插值表达式<div class="v"> <p> {{ title }} </p> // 插值表达式,直接通过变量名来访问变量内容 <p> {{ output() }} </p> // 插值表达式,可以调用函数 </div> // class为v的div标签 <script> var app = new Vue({ el: ".v", //el属性作用:设置Vue的生效位置, .v为选择class为v的标签 data() { return { // 固定写法,响应式数据放在这里 title: '标题' } }, methods: { //与data同级,这里用来写函数 outputs() { return this.title + "是无题" } } }) </script>
以上代码的效果如图所示二、指令
<p> {{ title }} </p> <p v-text="title></p> //这是指令的写法,效果与插值表达式一样
<p v-for="item in 5"> {{ item }} </p> // 在页面上显示1~5的数字
<p v-if="false"></p> // 不产生这个标签
<p :title="title"> // p标签的title属性绑定成响应式数据title的值,冒号是v-bind:的简写形式
<button @click="output()> </button> //把上面的output函数绑定到点击按钮的事件上,@是v-on:的简写
<input type="text" v-model="title"> // v-model是双向绑定,只能在表单中使用,就是可以通过表单输入来更新被绑定的数据的值