Vue前端

时间 2020-12-11

标签 javascript html 前端 vue java npm app 学习 .net 3d 栏目 JavaScript 繁體版

原文原文链接

1、Vue入门javascript

vue官网：https://cn.vuejs.org/
在作前端编辑时要应用vue.js：
vue.js得下载: 进官网---> 点击学习，点击教程---> 找到起步->看到安装点击进入、下滑找到开发和生产版本，点击便可下载vue.js ，提示：我这下的是开发版的
// 使用标签script 以CDN的方式引入vue.js --- 有外网时使用
< src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><>html

// 下载vue.js后在项目内引入
< src="js/vue.js"><>
注：<>标识为script标签前端

入门实例：vue

<head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>

<!-- 以CDN的方式引入vue.js 有外网时使用  -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

<!-- 下载vue.js后在项目内引入 -->
<script src="js/vue.js"></script>

<!-- 2.建立一个DIV元素 -->
<div id="app">
	app - {{ msg }}  <!-- 插值表达式，Vue实力会自动渲染数据到页面 -->
	
	<p>年龄 ：{{ age }}</p>
</div>

<!-- <div id="abc">
	abc - {{ msg }}
</div> -->

<script type="text/javascript">
	var vm = new Vue({ // 3.建立一个Vue实例  控制页面的某个区域
		el: '#app', // 挂载点，指明Vue实例要操做那个元素
		data:{ // Vue实例中的数据
			msg: '你好，Vue',
			age: 18
		}
	})
</script>
  </body>

2、v-xxx指令的使用java

v-text : 会覆盖元素原来的内容
v-html : 不会转义html标签输出到页面
v-cone : 页面的内容只渲染一次，数据改变后页面的内容也不会改变
以上三个指令实例代码：

运行效果：
npm

v-bind ：用于绑定属性，能够缩写为（:）

指令代码：
app

运行结果：
学习

v-on ：绑定事件，执行的方法要定义在Vue实例的methods属性中

指令代码：
.net

运行结果：
---- 3d

5-1. v-on ：事件修饰符：.stop -- 使用.stop事件修饰符，阻止事件冒泡； .precent -- 使用.precent事件修饰符，阻止标签的默认行为

指令代码：

运行结果：

v-model ：能够实现表单元素与Vue实例中数据的双向绑定 - 用于表单input（文本框），select（下拉框），textarea（文本域）等
指令代码：

运行结果：