vue2.0

修改输入框内的内容 上面的文字也会跟着变动

可以吧html css 和js 写到一个.vue文件里

var my = new Vue（{
  el:'body',  //或者用id  el:'#app'  在什么位置插入vue
  template：‘<div>{
  { fruit }}</div>’, //组件  将fruit渲染到div里  
  data:{           //构造参数
    fruit:'apple'
}）  

my.fruit 会取到apple

一般会先建一个根组件

new Vue({
el:'body',
component:{app}       //子组件app
})

不建议在组件里直接给data赋值

如data：{

f：1，

d：2

}

通过data:function(){

return {

 f:1,

 d:2

}

}

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var vm = new Vue({ // 选项 })

属性和方法

 
 
 

  
  
  var data = { 
  
  
  a: 
  
  
  1 }
 
 
 
 
 
 

  
  
  var vm = 
  
  
  new Vue({
 
 
 
 
 
 
  
  
  
  data: data
 
 
 
 
 
 

  
  
  })
 
 
 
 
 
 

  
  
  vm.a === data.a 
  
  
  // -> true
 
 
 
 
 
 

  
  
  // 设置属性也会影响到原始数据
 
 
 
 
 
 

  
  
  vm.a = 
  
  
  2
 
 
 
 
 
 

  
  
  data.a 
  
  
  // -> 2
 
 
 
 
 
 

  
  
  // ... 反之亦然
 
 
 
 
 
 

  
  
  data.a = 
  
  
  3
 
 
 
 
 
 

  
  
  vm.a 
  
  
  // -> 3
 
 
 

这些属性都是响应的    值的改变会触发视图重新渲染 

如果在实例创建之后再添加新的属性，那么他不触发视图更新

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

 
 
 

  
  
  var data = { 
  
  
  a: 
  
  
  1 }
 
 
 
 
 
 

  
  
  var vm = 
  
  
  new Vue({
 
 
 
 
 
 
  
  
  
  el: 
  
  
  '#example',
 
 
 
 
 
 
  
  
  
  data: data
 
 
 
 
 
 

  
  
  })
 
 
 
 
 
 

  
  
  vm.$data === data 
  
  
  // -> true
 
 
 
 
 
 

  
  
  vm.$el === 
  
  
  document.getElementById(
  
  
  'example') 
  
  
  // -> true
 
 
 
 
 
 

  
  
  // $watch 是一个实例方法
 
 
 
 
 
 

  
  
  vm.$watch(
  
  
  'a', 
  
  
  function (newVal, oldVal) {
 
 
 
 
 
 
  
  
  
  // 这个回调将在 `vm.a`  改变后调用
 
 
 
 
 
 

  
  
  })
 
 
 

不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用 箭头函数

插值

#文本

数据绑定最常见就是双大括号{ {}}的文本插值

 
 
 

  
  
  <span>Message: {
  { msg }}
  
  
  </span>
 
 
 

v-once属性 让插值内容不会随数据变化而变化

 
 
 

  
  
  <span v-once>这个将不会改变: {
  { msg }}
  
  
  </span>
 
 
 

#纯HTML

v-html 指令：

<div v-html="rawHtml"></div>

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML

不安全！！！！！

#使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

{ { number + 1 }} { { ok ? 'YES' : 'NO' }} { { message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"> </div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 --> { { var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> { { if (ok) { return message } }}

指令

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里， v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

#参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url"> </a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

缩写

v-bind 缩写

<!-- 完整语法 --> <a v-bind:href="url"> </a> <!-- 缩写 --> <a :href="url"> </a>

v-on 缩写

<!-- 完整语法 --> <a v-on:click="doSomething"> </a> <!-- 缩写 --> <a @click="doSomething"> </a>

计算属性

基础例子

<div id="example"> <p>Original message: "{ { message }}" </p> <p>Computed reversed message: "{ { reversedMessage }}" </p> </div>

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split( '').reverse().join( '') } } })

结果：

Original message: "Hello"

Computed reversed message: "olleH"

计算属性的缓存 vs method 方法

你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果：

<p>Reversed message: "{ { reversedMessage() }}" </p>

// in component methods: { reversedMessage: function () { return this.message.split( '').reverse().join( '') } }

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

method 调用方式将总是再次执行函数。√

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。这是为什么 Vue 通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

例如：

<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{ { answer }} </p> </div>

 
 
 

  
  
  <!-- Since there is already a rich ecosystem of ajax libraries    -->
 
 
 
 
 
 

  
  
  <!-- and collections of general-purpose utility methods, Vue core -->
 
 
 
 
 
 

  
  
  <!-- is able to remain small by not reinventing them. This also   -->
 
 
 
 
 
 

  
  
  <!-- gives you the freedom to just use what you're familiar with. -->