VUE引导——持续更新中.......

最新推荐文章于 2024-06-03 14:51:38 发布

风致﹏

最新推荐文章于 2024-06-03 14:51:38 发布

阅读量374

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_46393254/article/details/106155592

版权

本文是一份Vue.js的入门教程，涵盖了从创建第一个"hello world"程序，到数据绑定、条件渲染、事件绑定、计算属性、响应式问题及其解决方案等多个核心概念。通过学习，读者将掌握Vue的编码思想和开发工具，以及如何进行增删改查等实际操作。

摘要由CSDN通过智能技术生成

引导

vue官网：VUE官网

封装、库、框架的关系

封装通常指一小部分通用业务逻辑，多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架，而插件是为库或者框架发布后做后期补充，可以有官网或者第三方提供的，有点像游戏中外挂的意思，有时候一个模块就是一个文件，有时候一个文件里面有多个模块，把不同的文件按类别放置到不同的目录里，这个目录叫做包，框架改变了编码思想，库只是个工具你用或者不用不会影响你的编码思想

编码思想

jquery你用或者不用，你的编码思想都会是面向事件，开发一款插件中间用到什么库不重要，你会面向对象开发，如果用vue你要做的就是面向数据

vue开发工具

HbuilderX

vue第一个程序hello world

vue的使用，简单理解，new出来一个Vue的实例，传一堆配置参数，控制一片html

<script src="vue"></script>		//引入vue库文件
<body>
  //V层
  <div id="app">
    要被控制的html{
   {
   key}}
  </div>
</body>
<script>
	let vm = new Vue({
   	//VM层
    el:'#app'  //要控制的那片html代码
    data:{
   key:value}//数据model层	  M
  })
</script>

data选项

初始化数据位置，元数据，是vue实例的一个实例属性，所接受的数据类型有：
number/string/boolean/array/json/undefined/null

<script src="vue"></script>		//引入vue库文件
<body>
	<div id="app">		<!-- V层 -->
		<div>num:{
   {
   num}}</div>
		<div>str:{
   {
   str}}</div>
		<div>arr:{
   {
   arr}}</div>
		<div>arr2:{
   {
   arr2}}</div>
		<div>json:{
   {
   json}}</div>
		<div>bl:{
   {
   bl}}</div>
		<div>un:{
   {
   un}}</div>
		<div>null:{
   {
   null}}</div>
		<div>fn:{
   {
   fn}}</div>
		<div>调用fn:{
   {
   fn()}}</div>
	</div>
	
	<script type="text/javascript">
		let vm = new Vue({
   	//VM
			el:'#app',
			data:{
   	//M层
				num:110,
				str:'Fengzhi',
				arr:['aa','bb','cc'],
				arr2:[{
   title:'a',des:'xxxx'},{
   title:'b',des:'xxxx2'}],
				json:{
   a:1,b:2},
				bl:true,
				un:undefined,
				null:null,
				fn:function(){
   alert(1)}
			}
		})
	</script>
	
</body>

数据绑定(绑定到V层)

插值表达式

{ {数据名}} mustache语法声明式渲染

指令

v-text="数据名"

v-html="数据" 非转义输出

属性

v-bind:html属性="数据" 属性值动态化
:html属性="数据" 简写

v-bind:[属性名]="数据" 属性名动态化

<script src="vue"></script>		//引入vue库文件
<body>
	<div id="app">		<!-- V层 -->
		<h3>mustache插值表达式</h3>
		<div>num:{
   {
   num}}</div>
		<div>strong:{
   {
   strong}}</div>
		
		<h3>指令</h3>
		<div v-text="num"></div>
		<div v-html="strong"></div>
		
		<h4>属性</h4>
		<div v-bind:title="title">属性的值动态化</div>
		<div :title="title">属性动态化-简写</div>
		
		<div v-bind:[proname]="title">属性名+值的动态化</div>
		<div :[proname]="title">属性名+值的动态化-简写</div>
		
	</div>
	
	<script type="text/javascript">
		let vm = new Vue({
   	//VM
			el:'#app',
			data:{
   	//M层
				num:110,
				strong:'<strong>强壮</strong>',
				title:'盒子',
				proname:'alt'
			}
		})
	</script>
	
</body>

列表渲染

把数据指定到一些dom中去渲染，推荐操作的数据类型：变量数组、对象、字符、数字

<script src="vue"></script>		//引入vue库文件
<body>
	<div id="" class="app">
		<h3>列表渲染</h3>
		<ul>
			<li>{
   {
   arr}}</li>
		</ul>
		<hr>
		
		<ul>
			<li v-for="val in arr">{
   {
   val}}</li>
		</ul>
		<hr>
		
		<ul>
			<li v-for="val of arr">{
   {
   val}}</li>
		</ul>
		<hr>
		
		<ul>
			<li v-for="(val,index) in arr">{
   {
   index}}.{
   {
   val}}</li>
		</ul>
		<hr>
		
		<ul>
			<ol v-for="(item,index) in arr2">{
   {
   index}}-{
   {
   item.id}}-{
   {
   item.name}}-{
   {
   item.age}}</ol>
		</ul>
		<hr>
		
		<ul>
			<li v-for="item in arr3">
				{
   {
   item.name}} - {
   {
   item.age}} - {
   {
   item.id}}
				<ul>
					<li v-for="item2 of item.children">
						{
   {
   item2.id}} - {
   {
   item2.name}} - {
   {
   item.age}}
					</li>
				</ul>
			</li>
		</ul>
		<hr>
		
		<ul>
			<li v-for="(value,key) in json">{
   {
   value}} - {
   {
   key}}</li>
		</ul>
		<hr>
		
		<ul>
			<li v-for="(n,index) in 10">{
   {
   index}} - {

最低0.47元/天解锁文章

风致﹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE引导——持续更新中.......

引导vue官网：VUE官网封装、库、框架的关系封装通常指一小部分通用业务逻辑，多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架，而插件是为库或者框架发布后做后期补充，可以有官网或者第三方提供的，有点像游戏中外挂的意思，有时候一个模块就是一个文件，有时候一个文件里面有多个模块，把不同的文件按类别放置到不同的目录里，这个目录叫做包，框架改变了编码思想，库只是个工具你用或者不用不会影响你的编码思想编码思想jquery你用或者不用，你的编码思想都会是面向事件，开发一款插件中间用到什么库
复制链接

扫一扫