什么是vue.js？

transition属性   -webkit-transition:width 2s,height 2s; 

IE9作为分界线。

vue.js是响应式设计

v-if="show"//过渡效果的时候用

v-bind:title="message" //动态绑定的提示信息

v-on:click="show = !show" //一个调用 Vue 实例方法的事件监听器

v-for="todo in todos"   //动态创建列表li

v-model  //使表单输入和应用状态间的双向绑定

<div id="app-6">  <p>{{ message }}</p>  <input v-model="message"></div>

vue可以自己定义组件

<div id="app-7">  <ol>    <!-- 现在我们为每个todo-item提供待办项对象    -->    <!-- 待办项对象是变量，即其内容可以是动态的 -->    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>  </ol></div>

Vue.component('todo-item', {  // todo-item 组件现在接受一个  // "prop"，类似于一个自定义属性  // 这个属性名为 todo。  props: ['todo'],  template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({  el: '#app-7',  data: {    groceryList: [      { text: '蔬菜' },      { text: '奶酪' },      { text: '随便其他什么人吃的东西' }    ]  }})

ps:其中props是vue.js的属性名；item in groceryList 和item是一致的。

总结：vue.js经常在“ **”里定义变量，或者执行表达式。

问题：

/*为什么会有这个写法？vue里面的？还是css里面的？*/.fade-enter-active, .fade-leave-active {  transition: opacity .5s}.fade-enter, .fade-leave-active {  opacity: 0}

<div id="demo">  <button v-on:click="show = !show"> //点击click时，将!show赋值给show  延伸：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。    Toggle  </button>  <!-- 有这个标签吗？ -->  <transition name="fade">    <p v-if="show">hello</p>  </transition></div>

var demo=new Vue({  el: '#demo',  data: {    show: true  }})