vue下一步点击语法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue下一步点击语法相关的知识，希望对你有一定的参考价值。
1.Mustache（双大括号）:2.v-once：该指令后面不需要跟任何表达式（v-for后面接表达式）,该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
3.v-html：v-html会将数据当html标签解析后输出。
4.v-text：<h2 v-text="message"></h2>等效于<h2>message</h2>，但相比于Mustache，它不够灵活。
5.v-pre：如<h3 v-pre>message</h3>，标签显示结果就是它标签本身的内容，即message。
6.v-cloak：解决屏幕闪动的好方法。
7.v-bind：基本属性绑定和动态绑定（对象或数组），将对应的图片或地址等数据放入data中，使用v-bind将数据引用到对应的标签中，如<img v-bind:src="imgUrl" />，其中data数据如下：
v-bind语法糖（简写方式）：<img v-bind:src="imgUrl" />可写为<img :src="imgUrl" />。
8.计算属性：其本质就是属性，包含setter和getter，下面是两种操作实例：
<body>标签的内容：
对应vue代码：
一般为只读属性，所以可以省略set，写成如下形式：
9.v-on（缩写：@）：绑定事件监听器。一些处理事件的修饰符（可混合使用）：
（1）.stop阻止冒泡事件的发生
（2）.prevent阻止默认事件的发生，如不用.prevent,下面标签的submit指令会调用方法后直接提交服务器 ，即控制台显示的数据会闪过
（3）.keycode|keyAlias特定键盘键触发回调
（4）.once只触发一次回调
10.v-show:判断属性。
与v-if区别：v-if在条件为false时，包含v-if指令的元素不会出现在dom中；v-show在条件为false时，只是给元素添加一个行内样式：display:none，元素仍然在dom里面；
注意：当需要在显示与隐藏之间切换频率较高的时候，应该使用v-show（性能更高），当次数较少时通常使用v-if。
11.v-for:循环遍历操作。语法：
（1）遍历数组：v-for="(m,index) in movies" //m是新定义的变量名称，index是对应数组的下标，movies是已有的数组名。Index可省略。
（2）遍历对象：<li v-for=”(value,key) in moive”>item</li> //如果只获取一个值，那么取得的值是value，key可以省略。
12.v-model：实现双向绑定（等同于v-on和v-bind一起使用，实现实时显示）。
双向绑定的使用案例：
<body>
<div id="app">
<!-- 基础案例 -->
<!-- <input type="text" v-model="message"/>message -->
<!-- 当界面产生一个事件，浏览器会生成一个event对象，内部就包含当前输入的值 -->
<input type="text" :value="message" @input="change" /><br />
<h2>文本框输入内容：message</h2>
<br />
<!-- 单选框 -->
<span>
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex" />女
</label>
<h2>你选择的性别是：sex</h2>
</span>
<!-- 单击选择 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="info" /><span title="点击同意进入下一步">同意协议 </span>
<button :disabled="!info" @click="notice()">next</button>
<br />
<h2 v-if="info==true">你已经同意相关协议</h2>
</label>
<br />
<!-- 复选框 -->
<label>
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
<h2>你的爱好是：hobbies</h2>
</label>
<!-- v-model:select 分为复选框和单选框 -->
<!-- 单选框 -->
<select name="abc" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="橘子">橘子</option>
<option value="香蕉">香蕉</option>
<option value="哈密瓜">哈密瓜</option>
</select>
<h2>你选择的水果是：fruit</h2>
<!-- 多选框 -->
<select multiple="multiple" name="xyZ" v-model="stars" size="5">
<option disabled="disabled">ctrl+单击可复选</option>
<option value="刘德华">刘德华</option>
<option value="梁朝伟">梁朝伟</option>
<option value="黎明">黎明</option>
<option value="库里">库里</option>
</select>
<h2>你选择的明星是：stars</h2>
<!-- 值绑定 (动态绑定v-model)-->
<label v-for="item in orginHobbies">
<input type="checkbox" :value="item" />item
</label>
<!-- 修饰符 -->
<!-- 1.修饰符：lazy 敲回车时进行绑定-->
<div>
<input type="text" v-model.lazy="message" />
<h2>message</h2>
</div>
<!-- 2.修饰符：number转换数据类型 -->
<div>
<input type="number" v-model.lazy.number="numberBind" />
<h2>numberBind-typeof numberBind</h2>
</div>
<!-- 3.修饰符：trim除左右两边空格 -->
<div>
<input type="text" v-model.lazy="name" />
<h2>你输入的名字是：name</h2>
</div>
</div>
<script src="../js/v2.6.10/vue.js"></script>
<script>
let app = new Vue(
el: '#app',
data:
message: 'hello!!',
sex: '男',
info: false,
orginHobbies: ['橄榄球', '高尔夫球', '乒乓球'],
hobbies: [],
fruit: '橘子',
stars: [],
numberBind: '',
name: ''
,
methods:
change(event)
this.message = event.target.value;
,
notice()
alert('感谢你同意协议');
)
</script>
</body>
登录后复制

vue.js
javascript
前端
德国品牌的空气净化器
精选推荐
广告
 参考技术A vue下一步点击语法，第二个是默认的vue2项目最后一个是手动选择创建项目（diy选择需要的）进入下一步
请选择预设：手动选择功能
检查项目所需的功能：（按空格键＜space＞选择，＜a＞切换全部，＜i＞反转选择，按＜enter＞继续）
以上是关于vue下一步点击语法的主要内容，如果未能解决你的问题，请参考以下文章
安装MySQL版本为mysql-installer-community-5.7.9.1.msi