vue基础学习

一.概念

vue是一套用于构建用户界面的渐进式框架,可以自底向上逐层应用。

二.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
①文本插值
渲染结果为 Hello Vue

    {{ message }}

var app = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    }
});

②绑定元素 v-bind：

    
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    

var app2 = new Vue({
    el:'#app-2',
    data:{
        message:'页面加载于 ' + new Date().toLocaleString()
    }
});

三.条件与循环

③控制切换一个元素是否显示 v-if

    
现在你看到我了

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});

继续在控制台输入 app3.seen = false，之前显示的消息就会消失。

④绑定数组的数据来渲染一个项目列表 v-for
渲染结果为
1.学习 JavaScript
2.学习 Vue
3.整个牛项目

    

        

            {{ todo.text }}
        
    

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入 app4.todos.push({ text: '新项目' })，列表最后就会添加一个’新项目’。

四.处理用户输入

⑤v-on 指令添加一个事件监听器

    
{{ message }}
    反转消息

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

效果如下图：

点击反转消息：

注：在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理

⑥实现表单输入和应用状态之间的双向绑定 v-model
在表单输入什么，上面状态就会显示什么

    
{{ message }}
    

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

⑧执行一次性地插值，
当数据改变时，插值处的内容不会更新 v-once
⑨输出真正的 HTML v-html

五.计算属性

1.计算属性

{{ fullName }}

普通版本：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

计算属性版本：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

六.组件

1.定义Vue组件
组件是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能。
2.方式
①

②

//创建Vue实例
var vm = new Vue({
   el:'#app',
    data:{},
    methods:{},
    components:{
        //'组件的名称'：组件的模板对象
        'mylogin':login
    }
})

3.父子间传值