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

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

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

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

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

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

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

<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，特殊属性：class，style。

事件：普通事件，修饰符事件。
插槽：普通插槽，作用域插槽。

双向绑定：

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-bind和v-on

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

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

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

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

结言

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

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

作者简介

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

努力努力再努力Jeskson

posted @ 2019-03-19 21:54  达达前端  阅读(509)  评论(0)  编辑  收藏  举报