Vue基础上篇——学习周记12

Vue

  • Vue简介
  • 实例
    • 1.指令
    • 2.属性
    • 3.参数
    • 4.用户输入
    • 5.反转字符串
    • 6.条件语句

Vue简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

实例

1.指令

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 指令实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app1">
    <div v-html="message">div>
div>
	
<div id="app2">
	    <p v-if="seen">现在你看到我了p>
	    <template v-if="ok">
	      <h1>菜鸟教程h1>
	      <p>学的不仅是技术,更是梦想!p>
	      <p>哈哈哈,打字辛苦啊!!!p>
	    template>
	div>
<script>
new Vue({
  el: '#app1',
  data: {
    message: '

菜鸟教程

'
} }) new Vue({ el: '#app2', data: { seen: true, ok: true } })
script> body> html>

运行效果如图:
Vue基础上篇——学习周记12_第1张图片

2.属性

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 属性实例title>
head>
<style>
.class1{
  background: #444;
  color: #eee;
}
.class2{

  color: #0055ff;
}
style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>

<div id="app">
  <label for="r1">修改颜色label><input type="checkbox" v-model="use" id="r1">
  
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令1
  div>
  <div v-bind:class="{'class2': use}">
    v-bind:class 指令2
  div>
div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
script>
body>

运行效果如图:
Vue基础上篇——学习周记12_第2张图片
【点击修改颜色:】
Vue基础上篇——学习周记12_第3张图片

3.参数

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 参数实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程a>pre>
div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
script>
body>
html>

运行效果如图:
1
【点击链接后:】

Vue基础上篇——学习周记12_第4张图片

4.用户输入

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 用户输入实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
    <p>{{ message }}p>
    <input v-model="message">
div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
script>
body>
html>

运行效果如图:
Vue基础上篇——学习周记12_第5张图片

5.反转字符串

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 反转字符串实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
    <p>{{ message }}p>
    <button v-on:click="reverseMessage">反转字符串button>
div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
script>
body>
html>

运行效果如图:
Vue基础上篇——学习周记12_第6张图片
点击“反转字符串”按钮:
Vue基础上篇——学习周记12_第7张图片

6.条件语句

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 条件语句实例title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
    <div v-if="type === 'A'">
      A
	div>
	<div v-else-if="type === 'B'">
	  B
	div>
	<div v-else-if="type === 'C'">
	  C
	div>
	<div v-else>
	  Not A/B/C
	div>
div>
	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'A'
  }
})
script>
body>
html>

运行效果如图:
在这里插入图片描述
★VUE的学习并没有随本篇文章结束哦,敬请期待下一篇更精彩有趣的内容吧★

!喜欢的话不要忘记【一键三连】哦!撒花花啦~

你可能感兴趣的:(VUE,vue,前端)