第二个vue.js实例

最新推荐文章于 2022-08-18 19:32:28 发布
最新推荐文章于 2022-08-18 19:32:28 发布
阅读量133 收藏
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42705937/article/details/107745015
版权

完全摘抄菜鸟教程上的案例，加深下印象

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "菜鸟教程",
				url: "www.runoob.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				}
			}
		})
	</script>
</body>
</html>

以上运行结果为：

site : 菜鸟教程
url : www.runoob.com
菜鸟教程 - 学的不仅是技术，更是梦想！

1.当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
// 它们引用相同的对象！
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
 
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>

2.除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

3.使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

4.HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</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 指令
  </div>
	use: {{use}}
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

运行结果：未选中复选框，use默认为false,则不会使用class1样式；一旦选中复选框，use的值变为了true，则会使用class1的样式。

5.Vue.js 都提供了完全的 JavaScript 表达式支持

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	{{5+5}}<br>
	{{ ok ? 'YES' : 'NO' }}<br>
	{{ message.split('').reverse().join('') }}
	<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	ok: true,
    message: 'RUNOOB',
	id : 1
  }
})
</script>
</body>
</html>

运行结果：

10
YES
BOONUR
菜鸟教程

6.指令是带有 v- 前缀的特殊属性。
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子

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

7.参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

8.用户输入，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

9.按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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>

10.过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

11.v-bind 缩写

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

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
weixin_42705937
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
容器跟Vue实例能否多对多
小认真靖哥哥的博客
08-18 848
容器跟Vue实例能否多对多
Vue学习（二）Vue实例
vv的博客
07-15 225
Vue实例 创建一个Vue实例： 一个Vue应用通过用Vue函数创建一个Vue实例开始： var vm = new Vue({ // 选项 }) 数据与方法 当一个Vue实例被创建时，它将data对象中的所有property加入到Vue的响应式系统中。当这些property的值发生变化时，视图将会产生响应，即匹配更新的值。 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) /
两个实例看Vue数据代理
最新发布
qq_48434912的博客
08-18 238
这里利用Object.defineproperty方法通过obj1操作obj，利用get方法（即getter）调用和set方法（setter）修改obj中的x，从而实现数据代理。可知data中的数据存储在_data中。这里就是通过_data操作data中的数据。，为每一个添加到vm上的属性指定getter和 setter方法，利用它去操作。：通过一个对象代理对另一个对象中属性的操作（读／写）。configurable属性控制属性是否可以。enumerable属性控制属性是否可以。...
vue的两个案例
qq_46466568的博客
09-29 349
千米和米的转换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box">
第二个vue实例
catherine的博客
05-10 729
html:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兑换列表&lt;/title&gt; &lt;meta content="" name="keywords" /&gt; &amp
vue.js与后台数据交互的实例讲解
10-18
`.then`函数用于处理异步操作的结果，第一个参数是成功回调，第二个参数是错误回调。在这里，我们打印出服务器返回的响应，并在控制台和弹窗中显示数据。 在后台，我们需要配置一个能够响应GET请求的接口。在Java中...
vue.js入门源代码
08-07
一个Vue实例是数据和视图之间的桥梁，它可以绑定数据到DOM元素，并响应数据变化。在源代码中，你可能看到`new Vue({})`的结构，其中包含数据、方法和其他配置。 2. **数据绑定**：Vue.js 提供了双向数据绑定，这...
Vue.js前端开发实战-自测卷和课后习题答案.rar
07-10
Vue.js 是一款流行的轻量级前端JavaScript框架，用于构建用户界面。它以其声明式的数据绑定、组件化开发和简易的学习曲线而备受开发者喜爱。在这个"Vue.js前端开发实战-自测卷和课后习题答案"的压缩包中，包含了与...
三步搞定:Vue.js调用Android原生操作
10-14
为了使Vue.js能够调用Android接口，我们需要在WebView加载之前将`AndroidInterfaceForJS`实例注入到JavaScript环境中。这里使用了`AgentWeb`库，一个强大的Android WebView组件，提供了方便的API来管理WebView。 ``...
一、Vue.js入门.md
12-22
如果是对象，则第一个参数为键，第二个参数为对应的值。 - **`v-on`**: 用于绑定事件监听器，例如： ```html 点击我 ``` - **`v-bind`**: 动态绑定属性，可以简写为 `:`。 ```html 示例图片"> ``` - **`v-...
Vue-多个Vue实例、注册全局组件，Fetch、axios
NeilNiu
12-26 2853
一、多个Vue实例 vue同样可以初始化多个vue实例对象，然后里面的data、 methods、computed用法都是一样的 注意在不同的实例对象里，如果想使用别的实例对象里的data的某个属性，写法不用用this. ，要用 某个对象.。 const one = new Vue({ el: "#vue-app-one", data() { return { name: '', age: 31,
初始化多个Vue实例对象
mandy' blog
09-03 4378
// js var one = new Vue({ el: &quot;#vue-app-one&quot;, data: { title:&quot;app one 的内容&quot; }, methods: { }, computed: { greet: function(){ return &quot;hello app one&quot; ..
【Vue.js学习笔记】8：建立多个Vue实例对象,认识Vue中的组件
LauZyHou的笔记
12-25 6858
建立多个Vue实例对象 这里在同一个js文件中创建了两个Vue实例对象，它们各自能完成前面学的那些功能，同时使用对象名称也可以互相访问，协同实现一些功能。 index.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot; xmlns:v-on=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &am
vue,js入门（14）实例化多个vue对象
热门推荐
yiyiyixin的博客
05-18 1万+
//index.html&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/cs
vue快速入门的三个小实例
qq_40479190的博客
11-27 1万+
1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！ 1.本篇文章使用的vue版本是2.4.2，可能会和新
一个 Vue 的简单实例
小松的博客
05-30 767
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <META HTTP-E...
new Vue两个html元素嵌套Vue实例，绑定失效
09-06 4787
&lt;div id="dlg"&gt; &lt;div id="dlg_form"&gt; &lt;div&gt;{{k}}&lt;/div&gt; &lt;input id="k" name="k" value="v" v-model="k" /&gt; &a
"深度解析Vue.js面试题及生命周期详解
第二个阶段是created（创建后），在实例创建完成后立即被调用。在这个阶段，实例已经完成了前面提到的配置，并且$el属性已经被新创建的vm.$el替换了。 第三个阶段是beforeMount（载入前），在挂载开始之前被调用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值