zoukankan      html  css  js  c++  java

  • web基础之Vue

    官网https://cn.vuejs.org/v2/guide/index.html

    Avue:https://avuejs.com/doc/installation

    是一套用于构建用户界面的渐进式框架

    • 使用 Virtual DOM
    • 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

    CDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    .MVVM 模式的实现者——双向数据绑定模式
    Model：模型层，在这里表示 JavaScript 对象
    View：视图层，在这里表示 DOM（HTML 操作的元素）
    ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

    虚拟dom和diff算法（vue速度快的原因）

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

    var vm = new Vue({})
    插值表达式
    插值表达式的作用是在View中获得Model中的内容
    1.插值表达式
    <div id="app">{{title}} {{[1,2,3,4][2]}}
     {{ {"name":"xiaoyu","age":20}.age }} 
    {{ sayHello()}}
    new Vue({
    el:"#app",
    data:{
    title:"hello world!"
    },
    methods:{
    sayHello:function(){
    return "hello vue";
    }
    }
    });
    2.MVVM双向数据绑定：v-model
     
    <div id="app">
 <input type="text" v-model="title" />
 </div>
    3.事件绑定: v-on
    <input type="text" v-on:input="changeTitle" />
    v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue
    里定义的changeTitle方法
     
    event.target.value == 当前事件的对象（input元素）的value值 注意：此时的this指的是当前vue对象。
    所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.
    changeTitle:function(event)
{ this.title = event.target.value; }
    4.事件绑定简化版：使用@替换v-on:
     
    <input type="text" @input="changeTitle" />
    5.属性绑定： v-bind
    html里的所有属性，都不能使用插值表达式
    <a href="{{link}}">baidu</a>
new Vue({ 
el:"#app", 
data:{title:"hello world!",
     link:"http://www.baidu.com" 
},
    上面的这种做法是错误的，可以使用绑定属性绑定来解决：
    要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定
    <a v-bind:href="link">baidu</a> 
可以缩写成 冒号 
<a :href="link">baidu</a>
    6.v-once指令
    指明此元素的数据只出现一次，数据内容的修改不影响此元素
    <p v-once>{{titile}}</p>
    7.v-html
    就好比是innerHTML
    <p v-html="finishedlink"></p>
    new Vue({
el:"#app", 
data:{title:"hello world!", 
link:"http://www.baidu.com", 
finishedlink:"<a href='http://www.baidu.com'>百度</a>"
 },
    8.v-text
    纯文本输出内容
    <p v-text="finishedlink"></p>

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

    <div id="app">
  {{ message }}
</div>
    var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

    不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制

    除了文本插值，还可以像这样来绑定元素 attribute：

    

    <div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
    

    

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

    

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

    

       v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute
    

     <span v-bind:title="message">
    

    为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
    <button v-on:click="reverseMessage">反转消息</button>


    

    vue中的语句
    

    

    1.分支语句
    

    

    v-if
    

    

    v-else-if
    

    

    v-else
    

    

    v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好
    

    

    

    <div id="app"><p v-if="show">hahah</p> 
<p v-else>hohoho</p> 
<p v-show="show">hehehe</p>
 <input type="button" @click="show=!show" value="dianwo"/>
 </div> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> 

<script> 
new Vue({ 
el:"#app", data:{show:false 
} }); 
</script>
    

    

    循环语句
    

    vue中只有for循环
    

    

    

    <body> 
<div id="app"> <ul>
<li v-for="str in args"> {{str}} </li> 
</ul> 
</div> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({
 el:"#app", 
data:{args:["a","b","c","d"] 
} }); 
</script>
 </body
    

    

    改进版：for语句里，key建议加上，作为标识.i是下标
    

    

    

    

    

    <ul>
<li v-for="(str,i) in args" :key="i"> {{str}}{{i}} </li> 
</ul>
    

    

    

      

    • 组件（可以反复使用，方便快捷）
      在 Vue 中注册组件component
      • 



    

    

    / 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
    现在你可以用它构建另一个组件模板：
    

    <ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>
    

     
    

    

    但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。
    

    我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
    

    组件部分为：
    

    

    Vue.component('todo-item', {
  // todo-item 组件现在接受一个 "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
    

    

    完整如下
    

    

    Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
    

    

    

    <div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item     //之前定义的组件 所以直接用，并且是需要一个参数的'todo',所以我们需要绑定一个，即bind
    即我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
      v    -for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
    

    

    尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。
    

    我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。
    

     
    

    一个页面中只有一个div，其他的都是vue组件
    

    vue组件里的data必须使用function的形式对{}对象进行封装，防止对其他数据的修改。 注意，template里必须有
    

    一个根节点。
    

     
    

    

    <meta charset="UTF-8">
 <title>component</title> </head>
 <body>
<div id="app1"> 
<my-cap></my-cap> 
    </div>
 <div id="app2"> 
    </div>
 </body> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
     <script> 
    
new Vue({ 
el:"#app2", 
template:"<div>aaa</div>"
     }); 

    

    new Vue({ 
el:"#app1"
 }) 
    


    
Vue.component(    "my-cap",{ 
data()
    { 
    return { 
    status:"hellllllllo" 
    } 
    },
template:    '<p>{{status}}<button @click="changebtn">btn</button></p>',
methods:{ 
    changebtn:function(){
         this.status = "enennnnnnn" } 
    }
     }); 


    </script>
    

    

    改进版：提高了代码的重用性——万物皆组件（本地注册cpmponents）
    

    

    

    var cmp = { 
    data(){ 
        return { 
                status:"hellllllllo" } },
    template:'<p>{{status}}<button @click="changebtn">btn</button></p>',             
    methods:{ changebtn:function(){ this.status = "enennnnnnn" } } 
}

new Vue({ 
el:"#app1", 
components:{ "my-cap":cmp } })

new Vue({ 
el:"#app2", 
components:{ "cap":cmp } })                            
    

    


    

    数据与方法
    

    它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
    

    

    // 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
    

    

    

    

    // 获得这个实例上的 property 类似于属性，然后直接调用
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
    

    

    除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：
    

    

    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 (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
    

    

    实例生命周期钩子
    

     created， mounted、updated 和 destroye
    

     
    

    计算属性computed（是一个属性，缓存里面，不变值）
    

    基础例子
    

    <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: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
    

    结果：
    

    

    Original message: "Hello"
    

    Computed reversed message: "olleH"
    

    ==============================
    


    第一个VUE-cli
    

    (整个过程最后以管理员身份运行。）
    

    下载nodeJs安装，再安装nodeJs淘宝镜像加速器
    

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
    

    Node 是一个让 JavaScript 运行在服务端的开发平台
    

    而npm就是一个nodejs命令  -g全局安装
    


    详细步骤
    

    下载安装node.js https://nodejs.org/en/download/
    

    在node.js的cmd组件（command prompt）中安装vue-cli 
    

    

    创建vue项目文件夹并打开
    

    

    

    mkdir d:/vuedemo cd d:/vuedemo
    

    

    使用vue list命令查看当前可用的vue骨架
    

    使用vue命令创建基于vue-webpack-simple骨架的项目,vue-cli-demo是项目名，过程中需要输入一些参数，
    

    回车是使用提示的值
    

    

    

    vue init webpack-simple vue-cli-demo
    

    

    创建基于webpack骨架的项目
    

    

    

    vue init webpack vue-cli-demo
    

    

    过程截图
    

    淘宝镜像，以后网卡就可以用cnpm代替npm
    

    

    

    

    

    


     并且nmp路径如上
    

    安装vue-cli
    

    


     
    


    这一步完成后就会发现C:Program Files
odejs
ode_modules多了一个vue-cli文件夹并且里面有一个node_moudles
    

    这时候查看一下，就有这些方式存在了，
    

    


     而我们通常选择webpack打包方式
    


    

    

    什么是Webpack
    

    WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，
    

    找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），
    

    并将其转换和打包为合适的格式供浏览器使用。
    

    
入门https://www.runoob.com/w3cnote/webpack-tutorial.html
    


    为什么这里的vue需要webpack,这是因为vue是支持es6的而很多浏览器还是es5所以需要降级等操作，需要webpa ck
    

     
    

     看看实际操作截图
    

    


     然后按照提示进入项目，而这里的npm install提示类似于后端的下载依赖，所以前端下次又引入了包或者依赖又需要nom install一次
    

    

    

     也可以用cnpm install
    

    下载完成后看目录多出一个node_moudles，这个就是存放本地依赖的地方
    


    



     然后写vue项目比较容易出现的知识点
    

    1组件
    

    局部组件
    

    <script> 
    

    //内部注册 
    

    import Footer from "Footer.vue" 
    

    import Header from "Header.vue" 
    

    import Content from "Content.vue" 
    

    export default { 
    

    components:{ 
    

    "app-footer":Footer, 
    

    "app-header":Header, 
    

    "app-content":Content 
    

    } 
    

    }
    

    </script>
    

     
    

    全局组件
    

    

    import Home from './Home.vue'; 
    

    Vue.component("appHome",Home); 
    

    


    2传参
    

    下面看看父传子
    

    


     下面看看子传父、（可以理解为子传参数 Pops是为了确定类型，像Java里的声明一个方式，或者属性然后在父中实现即java中的实现类）
    

    




    

    

    <script> 
    

    //内部注册 
    

    import Footer from "Footer.vue" 
    

    import Header from "Header.vue" 
    

    import Content from "Content.vue" 
    

    export default { 
    

    components:{ 
    

    "app-footer":Footer, 
    

    "app-header":Header, 
    

    "app-content":Content 
    

    } 
    

    }
    

    </script>
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  Codeforces Round 546 (Div. 2)
                    
    Codeforces Round 545 (Div. 2)
                    
    Codeforces Round 544(Div. 3)
                    
    牛客小白月赛12
                    
    Codeforces Round 261(Div. 2)
                    
    Codeforces Round 260(Div. 2)
                    
    Codeforces Round 259(Div. 2)
                    
    Codeforces Round 258(Div. 2)
                    
    Codeforces Round 257 (Div. 2)
                    
    《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的分布
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/yangj-Blog/p/13044780.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看