专栏首页达达前端Web前端-Vue.js必备框架(三)

Web前端-Vue.js必备框架(三)

Web前端-Vue.js必备框架(三)

Web前端-Vue.js必备框架(三)

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

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

开发环境,浏览器使用chrome,ide:vs code或者webstormnode.js8.9+npm

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

生产环境:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

开发:

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" media="screen" href="main.css">
 <script src="main.js"></script>
</head>
<body>
<div id="app">
 {{ message }}
 <ol>
  <todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
 </ol>
</div>

 <script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js"></script>

<script>
 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li class="text"> {{ todo.text }} </li>'
 })
 var app = new Vue({
  el: '#app',
  data: {
   message: 'hello',
   arrList: [{
     id: 0,
     text: 'da'
   },{
     id: 1,
     text: 'shu'
   }]
  }
 })
</script>
 </body>
</html>
<body>
 <div id="app">
  {{message}}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    message: 'hello',
   }
  })
 </script>
</body>
vue CLI
npm install -g @vue/cli
vue create hello
cd hello
npm run serve

属性:自定义属性,原生属性,特殊属性。

组件中props中声明属性。

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

组件三大核心

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

事件:普通事件,修饰符事件。

@click @input @change 普通事件
@input.trim @click.stop @submit.prevent 修饰符事件
<template>
 <div>
  name: {{ name || "--" }}
  <br/>
  <input :value="name" @change="handleChange"/>
  <br/>
  <div @click="handleDivClick">
   <buttom @click="handleClick">成功</button>&nbsp;
   <button @click.stop="handleClick">失败</button>
  </div>
 </div>
</template>

<script>
export default {
 name: "EventDemo",
 props: {
  neme: String
 },
 methods: {
  handleChange(e) {
   this.$emit("change",  e.targer.value);
  },
  handleDivClick() {
   this.$emit("change", "");
  },
  handleClick(e) {
   //e.stopPropagation();
  }
 }
};
</script>

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

<template slot="#"></template>
<template v-slot:#></template>

<template slot="#" slot-scope="props"></template>
<template v-slot:#="props'></template>
<a-tab-pane key="event" tab="事件">
 <Event :name="name" @change="handleEventChange"/>
</a-tab-pane>

<a-tab-pane key="slot" tab="插槽">
 <h2>新语法</h2>
 <$lotDemo>
  <p></p>
  <template v-slot:title>
  <p>title</p>
  <p>tiltle</p>
  </template>
  <template v-slot:item="props">
   <p>item {{ props }} </p>
  </template>
 <$lotDemo>
 <br/>
</a-tab-pane>
<template>
 <div>
 <slot/>
 <slot name="title"/>
 <slot name="item" v-bind="{ value: 'vue' }"/>
 </div>
</template>

<script>
export default {
 name: "SlotDemo"
};
</script>

小结:

属性,自定义属性:props,原生属性:attrs,特殊属性:classstyle

事件:普通事件,修饰符事件。 插槽:普通插槽,作用域插槽。

双向绑定:

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

// 语法糖
<Personalnfo
 v-model="phoneInfo"
 :zip-code.sync="zipCode"
/>

<PersonalInfo
 :phone-info="phoneInfo"
 @change="val => (phoneInfo = val)"
 :zip-code="zipCode"
 @update:zipCode="val => (zipCode=val)"
/>

状态data和属性props

状态是组件自身的数据,属性来自父组件的数据。 状态和属性的改变都未必会触发更新。

好了!下面开讲:

开发环境版本:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

新手不建议用vue-cli哦!

数据渲染:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 1' },
      { text: '学习 2' },
    ]
  }
})
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello dashucoding!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'dashucoding!'
  }
})

组件化:

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in gList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

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:

修饰符:

<form v-on:submit.prevent="onSubmit">...</form>

v-bindv-on

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

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="do"></a>

<!-- 缩写 -->
<a @click="do"></a>

结言

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

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

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (19)打鸡儿教你Vue.js

    模板语法 计算属性 Class,Style绑定 条件渲染 列表渲染 事件处理 表单输入绑定

    达达前端
  • (4)打鸡儿教你Vue.js

    .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

    达达前端
  • vue介绍

    库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。

    达达前端
  • VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目前市面上主流的前端三大框架(均开源):Angular(Facebook主导的)、React(Github主导的)、Vue(尤雨溪个人项目,全球开发者社区维护)

    suwanbin
  • 第97天:CSS3渐变和过渡详解

    渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

    半指温柔乐
  • Ubuntu apt-get不能使用

    我 google 找了一圈,也有人遇到这个问题了,不过没有说是手机的问题,我总结一下就是遇到类似的问题,都可以用下面的方法来解决。 原始链接

    叉叉敌
  • JavaScript版的简单动画

    Google+中有一个特效:拖拽用户头像至分组内,用户头像会有一个特效(绕着圆圈转一圈)。写了个简单的示例,效果如下图所示:

    meteoric
  • 最让程序员崩溃的7件事

    “中断” 可以说是程序员生产力的头号杀手,因为被打断之后很难回到之前的地方,需要重新梳理思路,很有可能半小时就过去了。

    dys
  • Percona5.6.15线程池压力测试

    http://www.mysqlperformanceblog.com/2013/03/16/simcity-outages-traffic-control-a...

    java达人
  • iOS逆向工程之Theos

    如果你对iOS逆向工程有所了解,那么你对Tweak并不陌生。那么由Tweak我们又会引出Theos, 那么什么是Theos呢,简单一句话,Theos是一个越狱开...

    lizelu

扫码关注云+社区

领取腾讯云代金券