Web前端-Vue.js必备框架（三）

vue是一款渐进式javascript框架，由evan you开发。vue成为前端开发的必备之一。

vue的好处轻量级，渐进式框架，响应式更新机制。

开发环境，浏览器使用chrome，ide：vs code或者webstorm，node.js8.9+，npm等

uni-app直接使用<script>引入vue.js，vue会被注册为一个全局变量，开发环境不要使用压缩版本，一：开发版本有完整的警告和调式模式，二：生产版本删除了警告。

生产环境：

开发：

 
      
     
    
      {
   { message }} 
     
  
       
     
    
  

 
    
       {
   {message}} 
    
  

vue CLInpm install -g @vue/clivue create hellocd hellonpm run serve

属性：自定义属性，原生属性，特殊属性。

组件中props中声明属性。

vue组件=vue实例=new Vue(options)

每一个vue组件都是一个vue实例，vue实例通过new vue函数创建的。

事件：普通事件，修饰符事件。

@click @input @change 普通事件

@input.trim @click.stop @submit.prevent 修饰符事件

插槽：普通插槽和作用域插槽。

     
     
    
     
     
新语法
 <$lotDemo>  
     
  
       
      <$lotDemo> 
     
    

小结：

属性，自定义属性：props，原生属性：attrs，特殊属性：class，style。

事件：普通事件，修饰符事件。

插槽：普通插槽，作用域插槽。

双向绑定：

model数据的更新会导致view视图的更新，view视图的更新会导致model数据的更新。但vue是单向数据流，Object.defineProperty响应式更新。

// 语法糖
    
    

状态data和属性props

状态是组件自身的数据，属性来自父组件的数据。

状态和属性的改变都未必会触发更新。

好了！下面开讲：

开发环境版本：

生产环境版本：

新手不建议用vue-cli哦！

数据渲染：

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

    
  
         鼠标悬停几秒钟查看此处动态绑定的提示信息！  
    
var app2 = new Vue({  el: '#app-2',  data: {    message: '页面加载于 ' + new Date().toLocaleString()  }})

    
  
     
现在你看到我了
    
var app3 = new Vue({  el: '#app-3',  data: {    seen: true  }})

    
  
     
    
      
      {
   { todo.text }}    
  
     
    
var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 1' },      { text: '学习 2' },    ]  }})

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

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

组件化：

    
  
     
    
          
        
     
    
Vue.component('todo-item', {  props: ['todo'],  template: '
{
   { todo.text }}
'})var app7 = new Vue({  el: '#app-7',  data: {    gList: [      { id: 0, text: '123' },      { id: 1, text: '456' }    ]  }})

创建一个 Vue 实例

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

$用于区分与用户定义的属性。

v-once执行一次性插值，数据改变后，不会再改变。

v-bind:

修饰符：

    
     ...
    

v-bind和v-on

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。