1Mustache（双大括号）:
2v-once：该指令后面不需要跟任何表达式（v-for后面接表达式）,该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
3v-html：v-html会将数据当html标签解析后输出。
4v-text：<h2 v-text="message"></h2>等效于<h2>{{message}}</h2>，但相比于Mustache，它不够灵活。
5v-pre：如<h3 v-pre>{{message}}</h3>，标签显示结果就是它标签本身的内容，即{{message}}。
6v-cloak：解决屏幕闪动的好方法。
7v-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，写成如下形式：
9v-on（缩写：@）：绑定事件监听器。一些处理事件的修饰符（可混合使用）：
（1）stop阻止冒泡事件的发生
（2）prevent阻止默认事件的发生，如不用prevent,下面标签的submit指令会调用方法后直接提交服务器 ，即控制台显示的数据会闪过
（3）{keycode|keyAlias}特定键盘键触发回调
（4）once只触发一次回调
10v-show:判断属性。
与v-if区别：v-if在条件为false时，包含v-if指令的元素不会出现在dom中；v-show在条件为false时，只是给元素添加一个行内样式：display:none，元素仍然在dom里面；
注意：当需要在显示与隐藏之间切换频率较高的时候，应该使用v-show（性能更高），当次数较少时通常使用v-if。
11v-for:循环遍历 *** 作。语法：
（1）遍历数组：v-for="(m,index) in movies" //m是新定义的变量名称，index是对应数组的下标，movies是已有的数组名。Index可省略。
（2）遍历对象：<li v-for=”(value,key) in moive”>{{item}}</li> //如果只获取一个值，那么取得的值是value，key可以省略。
12v-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-modellazy="message" />
<h2>{{message}}</h2>
</div>
<!-- 2修饰符：number转换数据类型 -->
<div>
<input type="number" v-modellazynumber="numberBind" />
<h2>{{numberBind}}-{{typeof numberBind}}</h2>
</div>
<!-- 3修饰符：trim除左右两边空格 -->
<div>
<input type="text" v-modellazy="name" />
<h2>你输入的名字是：{{name}}</h2>
</div>
</div>
<script src="/js/v2610/vuejs"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello!!',
sex: '男',
info: false,
orginHobbies: ['橄榄球', '高尔夫球', '乒乓球'],
hobbies: [],
fruit: '橘子',
stars: [],
numberBind: '',
name: ''
},
methods: {
change(event) {
thismessage = eventtargetvalue;
},
notice() {
alert('感谢你同意协议');
}
}
})
</script>
</body>
登录后复制

vuejs
javascript
前端
德国品牌的空气净化器
精选推荐
广告

在vue项目中，当我们用v-for遍历select下的option时，我们想通过给option添加点击事件来获取我们所遍历的对象，却发现我们的点击事件根本不触发
那么我们怎样才能把我们想要的值传递过去呢？我们需要在select上绑定一个v-model，在data里定义一个v-model所绑定的空值，然后通过change事件将这个空值传递过去，然后我们在option上绑定value属性，在value上绑定你要传递的值（也可以是当前对象的下标或者id），然后在change事件中接收你传过来的值，就可以了
vue官网也对这部分进行了介绍： 详见官网
第三方组件官网
Element-ui
iView
Vant
如果父类组件需要直接获取子类的方法 可以使用 $children
子获父 $parent 子获取跟组件 $root
如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示
我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3
我们把vue实例当作根组件（父组件）
父跟子的关系
通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值
我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值
父组件获取子组件的值，我们用 $children 来获取，
$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件
如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：
如下
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）